KineticJS可拖動的圖像卡住後阻止

我使用的是KineticJS，至此它已經是一次很棒的體驗。我有一個問題是關於拖拉。我將這個例子中的圖像設置爲'draggable：true'，但是在第一次拖動它之後，它不能再次移動。KineticJS可拖動的圖像卡住後阻止

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 2754, 
    height: 1836 
}); 
var layer = new Kinetic.Layer(); 
var scale = '0.16339869281045751633986928104575'; 
var imageObj = new Image(); 
imageObj.onload = function() { 
    var img = new Kinetic.Image({ 
     x: 0, 
     y: 0, 
     height:612, 
     width:612, 
     image: imageObj, 
     draggable: true, 
     dragBoundFunc: function (pos) { 
      console.log(img.getAttrs()); 
      return { 
       x: Math.floor((pos.x/scale)/306)*306, 
       y: Math.floor((pos.y/scale)/306)*306 
       }; 
     } 
    }); 

    // add the shape to the layer 
    layer.add(img); 

    // add the layer to the stage 
    stage.add(layer); 

}; 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

http://jsfiddle.net/7UEC6/

任何幫助表示讚賞。對於額外的功勞，你可以提出一些方法來使拖動更平滑。

謝謝！

編輯：我已經注意到，圖像拖初始時間之後，dragBoundFunc不再稱爲當用戶試圖拖動圖像

，如果我拖動圖像返回到0它也適用，0但沒有其他時間

來源

2013-03-01 IIDenverII

這對目前的KineticJS來說是不可能的。

讓我試着解釋爲什麼。

當您使用transform：scale（CSS3元素（尚未標準））時，實際元素的視覺位置也會縮放。然而，MouseEvent的相對鼠標位置僅通過視覺位置（不是縮放位置）。

KineticJS使用的用於拖動的鼠標單擊事件僅讀取MouseEvent位置，它是可視的（不縮放）位置，它不考慮canvas元素的轉換。

當您設置圖像的x/y到下面，你甚至不能做的第一阻力

x: 612, 
    y: 612,

然而，當你把它設置爲0和0，它是因爲縮放和未縮放的位置是響應一樣。

對於上面的例子中的x/y 612和612，你不能點擊拖動，因爲KineticJS把它理解爲你沒有點擊612和612，但它認爲它爲100和100

原因就像我解釋的那樣簡單。

MouseEvent不傳遞縮放的X/Y，而是傳遞X/Y的可視位置。

誰知道什麼時候CSS3成爲一種標準，它可能是很好的支持:)

同時，我不建議使用轉換用帆布。除非你構建自己的框架，否則很難在畫布轉換後正確地做所有事情。

來源

2013-03-02 00:20:02 allenhwkim

這是令人失望的。我希望畫布輸出/保存2754x1836的圖像，但在450x300處顯示畫布。你能想到我能做到這一點的任何方式嗎？我需要更高的分辨率，因爲我最終打印圖像，450x300不會。 – IIDenverII 2013-03-02 00:56:58

您可以將舞臺設置爲450 x 300和可縮放和draggbale，並添加一個圖層2754 x 1836.嘗試一下，如果您有任何問題嘗試，請嘗試一下。在那裏，做到了。 – allenhwkim 2013-03-02 16:01:15

這就是我所需要的！這工作，非常感謝你！ – IIDenverII 2013-03-02 20:03:49

KineticJS可拖動的圖像卡住後阻止

回答

相關問題