如何在动态创建的画布上使用 Paper.js？答案

【问题标题】：How to use Paper.js on dynamically created canvas?如何在动态创建的画布上使用 Paper.js？
【发布时间】：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的光栅

标签： javascript jquery html canvas 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 中。