拉斐爾JS橢圓不拖動

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