KineticJS：使用錨點定義偏移和旋轉

我是KineticJS的新手，我嘗試使用錨點來旋轉和關於使用單獨錨點定義的中心點的圖像。KineticJS：使用錨點定義偏移和旋轉

我有旋轉工作和定義旋轉中心的工作也。然而，當用戶拖動錨點以定義旋轉中心時，我使用setOffset（）函數，它會使圖像移動而不是錨點。

我想知道是否有方法允許用戶拖動錨點並且錨點移動並設置偏移量而不是用戶拖動錨點並且圖像移動？

更新功能如下

function update(group, activeAnchor) { 
var topLeft = group.get(".topLeft")[0]; 
var topRight = group.get(".topRight")[0]; 
var bottomRight = group.get(".bottomRight")[0]; 
var bottomLeft = group.get(".bottomLeft")[0]; 
var centre = group.get(".centre")[0]; 
var image = group.get(".image")[0]; 

var anchorX = activeAnchor.getX(); 
var anchorY = activeAnchor.getY(); 

var centreX = group.getOffsetX(); 
var centreY = group.getOffsetY(); 

var width = group.getWidth(); 
var height = group.getHeight(); 
// update anchor positions 
switch (activeAnchor.getName()) { 
    case 'topLeft': 
      topRight.setY(anchorY); 
      bottomLeft.setX(anchorX); 
      centreX = topLeft.getX()/2; 
      centreY = topLeft.getY()/2; 
      break; 

    case 'topRight': 
      topLeft.setY(anchorY); 
      bottomRight.setX(anchorX); 
      centreX = topRight.getX()/2; 
      centreY = topRight.getY()/2; 
      break; 

    case 'bottomRight': 
      bottomLeft.setY(anchorY); 
      topRight.setX(anchorX); 
      break; 

    case 'bottomLeft': 
      bottomRight.setY(anchorY); 
      topLeft.setX(anchorX); 

      centre.setX(centreX); 
      centre.setY(centreY); 
      break; 

    case "centre": 
      var absolute = group.getPosition(); 
      group.setOffset(anchorX, anchorY); 
      group.setPosition(absolute); 
    } 

image.setPosition(topLeft.attrs.x, topLeft.attrs.y); 

var width = topRight.attrs.x - topLeft.attrs.x; 
var height = bottomLeft.attrs.y - topLeft.attrs.y; 
if(width && height) { 
    image.setSize(width, height); 
} 
}

我也想更新旋轉中心STHE圖像的四角拖動時調整。任何想法如何做到這一點？

預先感謝您。

UPDATE

小提琴：http://jsfiddle.net/njPdr/（它可能無法正常工作，在這裏，但你可以看到什麼，我想在這裏做）

來源

2014-01-27 jdor12345

您設置圖像的位置：image.setPosition(topLeft.attrs.x, topLeft.attrs.y);

如果將其替換爲image.setOffset(youroffsetx, youroffsety);，圖像將不再移動，您將設置像您想要的那樣的偏移量。關於你的第二個問題，請記住，偏移是旋轉的中心。在意見討論

編輯：

case "centre": 
      var absolute = group.getPosition(); 
      group.setOffset(anchorX, anchorY); 
      group.setPosition({x:absolute.x + group.getOffsetX(), y:absolute.y + group.getOffsetY()}); 
    }

來源

2014-01-30 13:39:13 Arioch

嗨。感謝您的幫助，但不幸的是它不起作用。該圖像是一個組的一部分，image.setPosition需要在該組（四個錨點）中具有用於調整大小的圖像。如果image.setPosition被移除並替換爲image.setOffset，那麼當組被拖動時，圖像將保留在舞臺的左上角。 – jdor12345

嗨，你能給我一個jsfiddle，所以我可以看到問題？ – Arioch

http://jsfiddle.net/njPdr/3這是一個完整的實現。它可能無法在小提琴中正常工作，但您會看到我正在嘗試做什麼。編碼或任何東西都不起作用。 js的副本在javascript部分，但js在我的網站上可以在外部使用，可以在外部資源下的html中看到kinetic.js – jdor12345

KineticJS：使用錨點定義偏移和旋轉

回答

相關問題