Question

我的页面上有多个画布图像我试图通过jquery在单个图像上的mousedown事件之后使用paperjs获取画布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>

我应该能够在我网站上的多个图像上绘制如下链接中的圆圈...

http://www.jqueryscript.net/demo/jQuery-Plugin-To-Draw-Shapes-with-Html5-Canvas-Element-drawingshapes/

我不能使用＆＃34;脚本类型=＆＃34; text / paperscript＆＃34;画布=＆＃39;＆＃39;＆＃34;因为我的画布是通过javascript动态创建的。任何帮助表示赞赏。提前谢谢。

Answer 1

如果您说动态添加了标识为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>

如何在动态创建的画布上使用paperjs？

1 个答案: