如何在动态创建的画布上使用 Paper.js？
Posted
技术标签:
【中文标题】如何在动态创建的画布上使用 Paper.js？【英文标题】：How to use Paper.js on dynamically created canvas? 【发布时间】：2015-05-10 01:49:56 【问题描述】：我的页面上有多个canvas 图像，我试图在通过jQuery 对单个图像的mousedown 事件之后使用Paper.js 获取画布ID。单击鼠标并运行以下代码后，我的图像消失了。
<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>
我应该能够在我的网站上的多张图片上绘制如下链接中的圆圈。
Drawing jQuery shapes using canvas elements
我不能使用"script type="text/paperscript" canvas=''"，因为我的canvas 是通过JavaScript 动态创建的。任何帮助表示赞赏。提前致谢。
【问题讨论】：
你能做一个jsfiddle吗？ 我认为我无法在 jsfiddle 中重现该问题，因为我的图像在我的本地文件系统中并且我的所有代码都在 Ajax 中......还有其他方法吗？ 您能否发布生成的 html，您的 ajax 运行后页面上的内容是什么？您应该能够从 chrome 中的“检查元素”复制它 我通过保存我的 HTML 代码粘贴到这里...ideone.com/jvhSA6 我想我应该做这样的事情“github.com/paperjs/paper.js/issues/479”说我应该使用paperjs的光栅 【参考方案1】：我想我明白你的问题是什么。 并行管理多个 Paper.js 上下文并非易事，需要了解一些技巧。 这是一个简单的fiddle，应该可以帮助您找到适合您特定需求的解决方案。
<!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>
【讨论】：
【参考方案2】：如果你说id为imgID的元素是动态添加的，你需要像$(document).on('mousedown', '#imgID', function (e) // your code here...);一样使用event delegation
<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>
【讨论】：
嗨，DelightedD0D。 imgID 不是动态添加的，它是一个 div……画布被添加到 div 中。以上是关于如何在动态创建的画布上使用 Paper.js？的主要内容，如果未能解决你的问题，请参考以下文章