如何將拉斐爾紙張內的可拖動的可拖動對象保留下來？

我有一個應用程序與許多可拖動對象，也可以旋轉90度增量。我試圖弄清楚如何阻止用戶拖拉拉斐爾紙（畫布）外的物體。如何將拉斐爾紙張內的可拖動的可拖動對象保留下來？

這對未旋轉對象來說相當簡單。我可以簡單地看到當前的x和y座標是否小於0並將它們設置爲0。我可以通過檢查它們是否超出畫布寬度和高度來進行類似的調整。

但是，當物體旋轉時會出現問題，因爲某些奇怪的原因，座標平面也會旋轉。有沒有簡單的方法來保持對象內的畫布？或者是有某個地方的例子嗎？

我已經花了很多時間擺弄這個，我似乎無法理解旋轉的座標平面以調整我的計算。即使在調試當前座標時，如果我拖動一個對象，釋放它，然後再次拖動對象，它們似乎會發生奇怪的變化。

任何幫助，非常感謝。

感謝，瑞安

來源

2012-02-26 Ryan

你試過Element.getBBox（）有2種黃酮，其旋轉前和旋轉後，您應觸發布爾參數和測試

來源

2012-02-28 01:42:59 Chasbeen

感謝您的響應。 getBBox（）中的x和y保持正確，即使在圖像旋轉時也是如此。 'attrs'x和y不會。然而，這仍然讓我面臨停止物體走出界限的問題。我現在可以用'getBBox（）'正確檢查它的位置，但我不知道如何將attrs x和y設置爲邊緣值。 – Ryan 2012-02-29 03:57:35

您可以使用Element.translate（x，y）;移動它 – Chasbeen 2012-02-29 04:10:38

無法正確地得到你的問題。請放一個小提琴，這樣可以幫助你理解你的問題 – rajkamal 2012-03-01 06:40:22

我不得不放棄的結果類似的問題，我需要另一種形狀的邊界內移動的形狀，所以我所做的就是：

element.drag(onstart, onmove, onend); 

... 
onStart: function(x,y,e){ 
     // Initialize values so it doesn't recalculate per iteration 
     // this allows to resume dragging from the point it were left 
     App.oldX = 0; 
     App.oldY = 0; 
     App.currentCircleX = App.fingerPath.attr('cx'); 
     App.currentCircleY = App.fingerPath.attr('cy'); 
    }, 
    onMove: function(dx,dy,x,y,e){ 
     App.setDirection(dx,dy); 
    }, 
    onEnd: function(e){ 
     // nothing to do here for now 
    }, 

// this function tells the element to move only if it's within the bound area 
    setDirection: function(dx, dy){ 
     var isXYinside; 
     this.newX = this.currentCircleX - (this.oldX - dx); 
     this.newY = this.currentCircleY - (this.oldY - dy); 

     // HERE is the key, this method receives your bounding path and evaluates the positions given and then returns true or false 
     isXYinside = Raphael.isPointInsidePath(this.viewportPath, this.newX, this.newY); 
     this.oldX = dx; 
     this.oldY = dy; 
     // so if it is within the bound area, will move, otherwise will just stay there 
     if (isXYinside) { 
      this.fingerPath.attr({ 
       "cx": this.newX, 
       "cy": this.newY 
      }); 
      this.currentCircleX = this.newX; 
      this.currentCircleY = this.newY; 
     } 
    }

我知道這是一個古老的一個，但我偶然發現日當試圖找出一種方法來解決這個問題時是個問題。所以這裏是我的2美分，以防有人遇到這個問題。

參考：

Raphael.isPointInsidePath

來源

2013-12-18 18:37:30 SkeloGH

如何將拉斐爾紙張內的可拖動的可拖動對象保留下來？

回答

相關問題