Question

我正在制作拉斐尔椭圆，带有圆形缩放器，就像这样。

    // 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');
        }
    );

当我尝试拖动椭圆时，缩放器圆圈会按原样移动，但椭圆不会移动。

Answer 1

我发现了问题。定义椭圆中心的属性是（cx，cy），而不是（x，y）。所以前一个函数的第一个调用应该是

this.attr({cx: this.ox+dx, cy: this.oy+dy});

虽然后者的前两个电话应该是

this.ox = this.attr('cx');
this.oy = this.attr('cy');

Raphael JS椭圆没有拖动

1 个答案: