Kineticjs Group图片拖动
[英]Kineticjs Group Image dragging
问题描述
I am new to Kinetic js and having issue figuring out how to stop the image from moving outside the boundary which then creates a white space 
我是Kinetic js的新手，并且有一个问题，想知道如何阻止图像移动到边界之外，然后创建一个空白区域
Here is my code so far 到目前为止，这是我的代码
//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);
2 个解决方案
解决方案1
2 已采纳 2017-06-15 21:08:34
Here is a working code snippet illustrating a dragBoundFunc(). 这是一个工作代码片段，说明了dragBoundFunc（）。
The gold rect is the area we intend to restrict the drag within. 黄金矩形是我们打算限制内部阻力的区域。 The blue rect shows the area we compute - different from the gold because we use the topleft of the draggable as the basis for our maths and we have to account for its own width and height. 蓝色矩形显示我们计算的区域 - 与黄金不同，因为我们使用draggable的topleft作为我们数学的基础，我们必须考虑它自己的宽度和高度。 The red block could be an image or any Konvajs element. 红色块可以是图像或任何Konvajs元素。
Drag the red block! 拖动红色块！
// 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>
解决方案2
1 2017-06-16 03:11:31
As an example of dragBoundFunc: 作为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;
}
});
Demo: http://jsbin.com/jilagadeqa/1/edit?js,output 演示： http ： //jsbin.com/jilagadeqa/1/edit？js，output
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.