如何在动态创建的画布上使用 Paper.js？
[英]How to use Paper.js on dynamically created canvas?
问题描述
I have multiple canvas images on my page and I am trying to get the canvas id using Paper.js after the mousedown event on a single image through jQuery .
我的页面上有多个canvas图像，我试图在单个图像上的mousedown事件之后通过jQuery使用Paper.js获取画布 ID。 My image disappears after a mouse click and after running the code below.单击鼠标并运行下面的代码后，我的图像消失了。
<script type="text/javascript">
window.onload = function () {
$('#imgID').on('mousedown', function (e) { //imgID is my div
if($.isNumeric(e.target.id)){
console.log(e.target.id);
var canvas = document.getElementById(e.target.id);
paper.setup(canvas);
var path = new paper.Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,
strokeColor: 'red'
});
// Remove this path on the next drag event:
path.removeOnDrag();
}else {
return;
}
var offset = $(this).offset();
console.log(e.clientX - offset.left);
console.log(e.clientY - offset.top);
});
}
</script>
I should be able to draw circles like on the link below on multiple images on my website.我应该能够在我网站上的多个图像上绘制如下链接所示的圆圈。
Drawing jQuery shapes using canvas elements 使用画布元素绘制 jQuery 形状
I cannot use "script type="text/paperscript" canvas=''" as my canvas are created dynamically through JavaScript.我不能使用"script type="text/paperscript" canvas=''"因为我的canvas是通过 JavaScript 动态创建的。 Any help is appreciated.任何帮助表示赞赏。 Thanks in advance.提前致谢。
2 个解决方案
解决方案1
0 2015-03-08 23:12:05
If your saying that the element with the id imgID is added dynamically, you'll need to use event delegation like $(document).on('mousedown', '#imgID', function (e) { // your code here...}); 如果您说ID为imgID的元素是动态添加的，则需要使用事件委托，例如$(document).on('mousedown', '#imgID', function (e) { // your code here...});
<script type="text/javascript">
window.onload = function () {
$(document).on('mousedown', '#imgID', function (e) { //imgID is my div
if($.isNumeric(e.target.id)){
console.log(e.target.id);
var canvas = document.getElementById(e.target.id);
paper.setup(canvas);
var path = new paper.Path.Circle({
center: event.downPoint,
radius: (event.downPoint - event.point).length,
strokeColor: 'red'
});
// Remove this path on the next drag event:
path.removeOnDrag();
}else {
return;
}
var offset = $(this).offset();
console.log(e.clientX - offset.left);
console.log(e.clientY - offset.top);
});
}
</script>
解决方案2
0 2021-12-21 10:25:35
I think that I understand what your problem is.我想我明白你的问题是什么。
It is not trivial to manage several Paper.js contexts in parallel, there are some tricks to know.并行管理多个 Paper.js 上下文并非易事，需要了解一些技巧。
Here's a simple fiddle that should get you on the track to find a solution adapted to your specific need.这是一个简单的小提琴，可以让您走上正轨，找到适合您特定需求的解决方案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://unpkg.com/acorn"></script>
<script src="https://unpkg.com/paper"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
</main>
<script>
// For each canvas...
const canvasIds = ['canvas1', 'canvas2'];
canvasIds.forEach((id) => {
// ...instantiate a dedicated PaperScope.
// It will handle all the drawings related to this specific canvas.
const scope = new paper.PaperScope();
scope.setup(document.getElementById(id));
// On mouse down...
scope.view.onMouseDown = (event) => {
// ...draw a circle at the mouse position.
new scope.Path.Circle({
center: event.point,
radius: 50,
fillColor: 'orange',
// Make sure to always specify the shape parent.
// Otherwise it will be inserted into the last created scope.
parent: scope.project.activeLayer
});
};
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.