0

このように、円形のリサイザーを使用してラファエル楕円を作成しています。

    // Ellipse initially positioned in middle of image with dimensions 100x100
    var horizRadius = 50,
        verticalRadius = 50,
        x0 = (imageWidth)/2-horizRadius,
        y0 = (imageHeight)/2-verticalRadius,
        resizerRadius=5;

    // Make ellipse with top, bottom, left and right resizer handles
    Canvas.ellipse = Canvas.paper.ellipse(x0, y0, horizRadius, verticalRadius);
    Canvas.topResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)-verticalRadius, resizerRadius);
    Canvas.bottomResizer = Canvas.paper.circle(parseInt(x0), parseInt(y0)+verticalRadius, resizerRadius);
    Canvas.leftResizer = Canvas.paper.circle(parseInt(x0)-horizRadius, parseInt(y0), resizerRadius);
    Canvas.rightResizer = Canvas.paper.circle(parseInt(x0)+horizRadius, parseInt(y0), resizerRadius);

    // Make empty ellipse with red border
    Canvas.ellipse.attr({stroke: 'red', fill: 'red'});
    Canvas.ellipse.attr({"fill-opacity": 0.0, "stroke-opacity": 1.0});
    Canvas.ellipse.attr({"stroke-width": 3});

    // Get visible handle for resizing
    Canvas.topResizer.attr({fill:'#ccff00'});
    Canvas.bottomResizer.attr({fill:'#ccff00'});
    Canvas.leftResizer.attr({fill:'#ccff00'});
    Canvas.rightResizer.attr({fill:'#ccff00'});

すべてが正しく見えます。画像の中央に円が表示され、リサイザーの円が正しい位置にあります。

次に、構造全体をこのようにドラッグしてみます。

    // Drag the whole rectangle when the user clicks inside the rectangle and holds down the key
    Canvas.ellipse.drag(
        function(dx, dy, x, y){
            this.attr({x: this.ox+dx, y: this.oy+dy});
            Canvas.topResizer.attr({cx: this.tox+dx, cy: this.toy+dy});
            Canvas.bottomResizer.attr({cx: this.box+dx, cy: this.boy+dy});
            Canvas.leftResizer.attr({cx: this.lox+dx, cy: this.loy+dy});
            Canvas.rightResizer.attr({cx: this.rox+dx, cy: this.roy+dy});
        },
        function(){
            this.ox = this.attr('x');
            this.oy = this.attr('y');
            this.tox = Canvas.topResizer.attr('cx');
            this.toy = Canvas.topResizer.attr('cy');
            this.box = Canvas.bottomResizer.attr('cx');
            this.boy = Canvas.bottomResizer.attr('cy');
            this.lox = Canvas.leftResizer.attr('cx');
            this.loy = Canvas.leftResizer.attr('cy');
            this.rox = Canvas.rightResizer.attr('cx');
            this.roy = Canvas.rightResizer.attr('cy');
        }
    );

楕円をドラッグしようとすると、リサイザーの円は正常に動きますが、楕円は動きません。

4

1 に答える 1