Kineticjs Group圖片拖動

Question

我是Kinetic js的新手，並且有一個問題，想知道如何阻止圖像移動到邊界之外，然后創建一個空白區域

到目前為止，這是我的代碼

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

Answer 1

這是一個工作代碼片段，說明了dragBoundFunc（）。

黃金矩形是我們打算限制內部阻力的區域。 藍色矩形顯示我們計算的區域 - 與黃金不同，因為我們使用draggable的topleft作為我們數學的基礎，我們必須考慮它自己的寬度和高度。 紅色塊可以是圖像或任何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>

Answer 2

作為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

Kineticjs Group圖片拖動

問題描述

2 個解決方案

解決方案1
2 已采納 2017-06-15 21:08:34

解決方案2
1 2017-06-16 03:11:31

Kineticjs Group圖片拖動

問題描述

2 個解決方案

解決方案1 2 已采納 2017-06-15 21:08:34

解決方案2 1 2017-06-16 03:11:31

解決方案1
2 已采納 2017-06-15 21:08:34

解決方案2
1 2017-06-16 03:11:31