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のコンソールは次のように述べています: Uncaught Error: 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 に答える