如何正确绘制椭圆[KineticJs]

Posted 2023-02-22

【中文标题】如何正确绘制椭圆[KineticJs]

【英文标题】：How to draw ellipse correctly [KineticJs]

【发布时间】：2013-01-05 08:11:39

【问题描述】：

如何创建可以根据鼠标坐标创建椭圆的绘图画布？ 这是我在 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：kinetic.js:29 上的 DOM 异常 1

我的代码出了什么问题？

最好的问候，

卢基·R·罗皮斯

【参考方案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/ 这个链接已经没有错误了。