我有一个简单的应用程序，可以绘制直线、矩形和多边形。
我正在使用 paper.js，但不知道如何控制流程。
仅当单击线条（按钮）时才应绘制线条。目前，默认情况下，线条是在画布上绘制的。
<!-- templates/index.html -->
<html>
<head>
<title>Annotation Tool</title>
<!-- CSS Files -->
<link rel="stylesheet" href="/static/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/style.css">
<!-- Javascript files -->
<script src="/static/node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="/static/node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script src="/static/js/scripts.js" charset="utf-8"></script>
<!-- Paper files -->
<script src="/static/node_modules/paper/dist/paper-full.min.js" charset="utf-8"></script>
<script type="text/paperscript" src="/static/js/paperscript.js" charset="utf-8" canvas="myCanvas"></script>
</head>
<body>
<script>
</script>
<div class="container">
<div class="row row-bordered">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="draw-line">Line</button>
<button type="button" class="btn btn-primary" id="draw-rect">Rectangle</button>
<button type="button" class="btn btn-primary" id="draw-poly">Polygon</button>
</div>
</div>
<canvas id="myCanvas"></canvas>
<!--<div class="row">-->
<!--<img src="/static/images/lena.png" alt="Italian Trulli">-->
<!--</div>-->
</div>
</body>
</html>
我的 paperscript.js
tool.minDistance = 10;
var path;
function onMouseDown(event) {
// Create a new path and give it a stroke color:
path = new Path();
path.strokeColor = '#00000';
// Add a segment to the path where
// you clicked:
path.add(event.point);
}
function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point);
}
function internalClicked() {
alert('clicked!');
}
globals.onMouseDown = onMouseDown
globals.onMouseDrag = onMouseDrag
globals.internalClicked = internalClicked
//脚本.js
var globals = {}
$(document).ready(function(){
$('#draw-line').click(function(){
// how can I pass this function to paper script, so that before drawing the line I can check if the draw-line is clicked.
// or how can I override the mouseclickevents of paperjs in javascript.
})
})
关于
Paper.jsPaper.jspaper这样做，您将能够更好地将绘图逻辑集成到代码中，并且不必依赖诸如全局变量之类的坏东西。
以下示例说明了如何实现“画线”按钮。
// wait for DOM to be loaded
$(document).ready(function ()
{
// init paper in your canvas
paper.setup($('#myCanvas').get(0));
// on button click
$('#draw-line').click(function ()
{
// draw a line between 2 random points
new paper.Path.Line({
from : paper.Point.random().multiply(paper.view.size),
to : paper.Point.random().multiply(paper.view.size),
strokeColor: 'black'
});
});
});canvas {
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
z-index:-1;
}<html>
<head>
<title>Line Tool</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
</head>
<body>
<button type="button" id="draw-line">Line</button>
<canvas id="myCanvas"></canvas>
</body>
</html>根据官方文档，PaperScript 和 JavaScript 都可以访问 Window 范围，因此我们可以使用 JavaScript 中的 window.globals 和 PaperScript 中的全局变量来来回传递信息。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
var path = new Path();
path.strokeColor = 'black';
var start = new Point(100, 100);
path.moveTo(start);
// Use the global variables a and b defined in the JavaScript
path.lineTo(start + [ globals.a, globals.b ]);
// Define a global function inside the window scope.
globals.lineTo = function(c,d) {
path.lineTo(new Point(c, d));
}
</script>
<script type="text/javascript">
// To avoid race problem, the following should not be in window.onload as the PaperScript might run before.
window.globals = { a: 50, b: -50 };
// Update the path from the JavaScript code.
window.onload = function () {
document.getElementById("lineToBtn").onclick = function () {
let x = Number(document.getElementById("x").value);
let y = Number(document.getElementById("y").value);
window.globals.lineTo(x, y);
};
};
</script>
</head>
</html>