0

我如何创建一个可以根据鼠标坐标创建椭圆的绘图画布？这是我在 jsfiddle 上的代码（我还是新手）：

http://jsfiddle.net/thekucays/DRfph/

这是我绘制椭圆的代码（第 59 行）：

var x, y, width, height;
        //var rect;

        //Math.min untuk mencari nilai terkecil dari 2 parameternya
        x = Math.min(event.clientX, lastX);
        y = Math.min(event.clientY, lastY);

        //Math.abs buat bikin nilai negatif jadi positif
        width = event.clientX - lastX;
        height = event.clientY - lastY;

        if(rect_drawed == 0){
            rect = new Kinetic.Ellipse({
                x: x,
                y: y,
                radius:{
                    x: width,
                    y: height
                },
                stroke: 'black',
                strokeWidth: 4,
                fill: 'blue',
                name: 'rect'+rect_counter
            });
            layer.add(rect);
            layer.draw();
            rect_drawed = 1;
            //stage.add(rect);

            /*rect.on('click', function(){
                rect.setFill('RED');
            });*/
        }
        rect.setAttrs({
            x: width / 2,
            y: height / 2
        });
        layer.draw();

所以，当我执行代码时，它会导致一个错误..chrome的控制台说：未捕获的错误：INDEX_SIZE_ERR: DOM Exception 1 on kinetic.js:29

我的代码出了什么问题？

此致，

卢基·R·罗皮斯

4

1 回答 1

1

看着你的代码，

    width = event.clientX - lastX;
    height = event.clientY - lastY;

您允许宽度和高度为负数，这会引发 DOM 异常。

做了：

    width = Math.abs(event.clientX - lastX);
    height = Math.abs(event.clientY - lastY);

http://jsfiddle.net/HSdgT/3/此链接复制了您的错误。

http://jsfiddle.net/HSdgT/4/此链接与错误消失。

于 2013-01-22T15:31:43.873 回答