Kineticjs 组图像拖动

Question

我是 Kinetic js 的新手，在弄清楚如何阻止图像移出边界然后创建白色 space

时遇到了问题

到目前为止，这是我的代码

//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() 的工作代码片段。

金色矩形是我们打算限制拖动的区域。蓝色矩形显示了我们计算的区域——与金色矩形不同，因为我们使用可拖动对象的左上角作为我们数学的基础，我们必须考虑它自己的宽度和高度。红色块可以是图像或任何 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 组图像拖动

Kineticjs Group Image dragging

javascript

jquery

html5-canvas

kineticjs

konvajs