Kineticjs組圖片拖動

我是新來Kinetic js和有問題搞清楚如何從移動的邊界，然後創建一個空白Kineticjs組圖片拖動

這裏外停止圖像是到目前爲止我的代碼

//photo layer 
var photoGroup = new Kinetic.Group({ x: layout.photoGroup.x, y: layout.photoGroup.y, draggable: true }); 

var Photolayer = new Kinetic.Layer(); 

var cropArea = new Kinetic.Rect({ 
    x: layout.cropAreaRect.x, 
    y: layout.cropAreaRect.y, 
    width: layout.cropAreaRect.width, 
    height: layout.cropAreaRect.height, 
    fill: "white", 
    listening: false 
}); 

Photolayer.add(cropArea); 
Photolayer.add(photoGroup); 

stage.add(Photolayer);

來源

2017-06-12 Kevin

你嘗試使用'dragBoundFunc'？ – lavrton

@lavrton我做了，但不知道如何去決定'pos.x'和'pos.y'？你有什麼建議嗎？ – Kevin

下面是一個說明dragBoundFunc（）的工作代碼片段。

黃金矩形是我們打算限制其內的區域。藍色矩形顯示我們計算的區域 - 與黃金不同，因爲我們使用可拖動的前綴作爲數學的基礎，我們必須考慮它自己的寬度和高度。紅色塊可以是圖像或任何Konvajs元素。

拖動紅塊！

// add a stage 
 
var s = new Konva.Stage({ 
 
    container: 'container', 
 
    width: 800, 
 
    height: 600 
 
}); 
 

 
// add a layer   
 
var l = new Konva.Layer(); 
 
s.add(l); 
 

 
// Add a green rect to the LAYER just to show boundary of the stage. 
 
var green = new Konva.Rect({stroke: 'lime', width: 800, height: 600, x: 0, y: 0}); 
 
l.add(green); 
 

 

 
// Add a gold rect to the LAYER just to give some visual feedback on intended drag limits 
 
var gold = new Konva.Rect({stroke: 'gold', width: 400, height: 200, x: 55, y: 55}); 
 
l.add(gold); 
 

 

 
// Add a red rect to act as our draggable 
 
var red = new Konva.Rect({fill: 'red', stroke: 'red', width: 40, height: 50, x: 65, y: 65, draggable: true, 
 
     dragBoundFunc: function(pos) { 
 
     
 
        var newX = pos.x; 
 
        if (newX < minX){ newX = minX}; 
 
        if (newX > maxX){ newX = maxX}; 
 

 
        var newY = pos.y; 
 
        if (newY < minY){ newY = minY}; 
 
        if (newY > maxY){ newY = maxY}; 
 

 
        $("#info").html('Info: Pos=(' + newX + ', ' + newY + ') range X=' + minX + ' - ' + maxX + ' Y=' + minY + ' - ' + maxY); 
 
        
 
      return { 
 
       x: newX, 
 
       y: newY 
 
      } 
 
     } 
 

 
}); 
 
l.add(red); 
 

 

 
// calculate the drag boundary once for performance - we need to have the draggable element size for this ! 
 
var goldPos = gold.getAbsolutePosition() 
 
var minX = goldPos.x; 
 
var maxX = goldPos.x + gold.width() - red.width(); 
 
var minY = goldPos.y; 
 
var maxY = goldPos.y + gold.height() - red.height(); 
 

 

 
// Add a blue rect to the LAYER just show the computed drag limits - note the subtraction of the draggable element dimensions from maxX & Y. Note the 1px adjustment is to avoid overlapping the gold rect in the demo and is not required for live. 
 
var blue = new Konva.Rect({stroke: 'blue', opacity: 0.2, width: 399 - red.width(), height: 199 - red.height(), x: 56, y: 56}); 
 
l.add(blue); 
 

 
// bring red back to top so we can drag it 
 
red.moveToTop(); 
 

 
l.draw(); // redraw the layer it all sits on.

#container { 
 
    border: 1px solid #ccc; 
 
} 
 
#info { 
 
height: 20px; 
 
border-bottom: 1px solid #ccc; 
 
} 
 
#hint { 
 
font-style: italic; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script> 
 

 

 
<body> 
 
<div id='hint'>Hint: green is stage, gold is intended drag limit, blue is computed drag limit.<br/>Drag the red block!</div> 
 

 
<div id='info'>Info:</div> 
 

 
    <div id="container"></div> 
 
</body>

來源

2017-06-15 21:08:34

該soln幫助了很多。謝謝 – Kevin

作爲dragBoundFunc的例子：

const dragRect = new Konva.Rect({ 
    x: window.innerWidth/2 - 50, 
    y: window.innerHeight/2 - 50, 
    width: 100, 
    height: 100, 
    fill: 'green', 
    draggable: true, 
    dragBoundFunc: (pos) => { 
    const leftBound = cropRect.x(); 
    const rightBound = cropRect.x() + cropRect.width() - dragRect.width(); 
    pos.x = Math.max(leftBound, Math.min(rightBound, pos.x)); 

    const topBound = cropRect.y(); 
    const bottomBound = cropRect.y() + cropRect.height() - dragRect.height(); 
    pos.y = Math.max(topBound, Math.min(bottomBound, pos.y)); 
    return pos; 
    } 

});

演示：http://jsbin.com/jilagadeqa/1/edit?js,output

來源

2017-06-16 03:11:31 lavrton

Kineticjs組圖片拖動

回答

相關問題