如何在动态创建的画布上使用paperjs？ [英] how to use paperjs on dynamically created canvas?

问题描述

我在我的页面上有多个画布图像我试图获得画布id使用paperjs mousedown事件后通过jquery单个图像。我的图片在鼠标点击后运行以下代码后消失...

I have multiple canvas images on my page I am trying to get canvas id using paperjs after mousedown event on a single image through jquery. My image disappears after a mouse click and after running the below code...

<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 the one in the below link on multiple images on my website...

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

我不能使用script type =text / paperscriptcanvas =''因为我的画布是通过javascript动态创建的。任何帮助是赞赏。提前感谢。

I cannot use "script type="text/paperscript" canvas=''" as my canvas are created dynamically through javascript. Any help is appreciated. Thanks in advance.

推荐答案

如果你说有id imgID 已动态添加，您需要使用事件委托，例如 $（document）.on（'mousedown'，'#imgID'，function（e）{//您的代码在此...}）;

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...});

<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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！