Question

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

这是我绘制椭圆的代码（第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：kinetic.js上的DOM异常1：29

我的代码出了什么问题？

最诚挚的问候，

Luki R Rompis

Answer 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/此链接出错了。

如何正确绘制椭圆[KineticJs]

1 个答案: