拖动绑定与 Konva.Layer
Drag Bound with Konva.Layer
我在我的项目中使用KonvaJs。我需要实现绑定到Konva.Layer
的拖动。我的图层有许多其他形状和图像。我需要将图层的移动限制在其宽度和高度的 50% 以内。我在这个 plunkr 中所做的方式。当用户使用鼠标滚轮放大或缩小图层时,会出现此问题。缩放后,我不知道为什么拖动边界的行为不同。似乎我无法正确进行数学运算。我需要具有相同的行为,即当用户不执行缩放时限制图层移动的方式。这就是我正在做的:
//... a helper object for zooming
var zoomHelper = {
stage: null,
scale: 1,
zoomFactor: 1.1,
origin: {
x: 0,
y: 0
},
zoom: function(event) {
event.preventDefault();
var delta;
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
if (event.originalEvent.detail > 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
} else {
if (event.originalEvent.wheelDelta < 0) {
//scroll down
delta = 0.2;
} else {
//scroll up
delta = 0;
}
}
var evt = event.originalEvent,
mx = evt.clientX - zoomHelper.stage.getX(),
my = evt.clientY - zoomHelper.stage.getY(),
zoom = (zoomHelper.zoomFactor - delta),
newscale = zoomHelper.scale * zoom;
zoomHelper.origin.x = mx / zoomHelper.scale + zoomHelper.origin
.x - mx / newscale;
zoomHelper.origin.y = my / zoomHelper.scale + zoomHelper.origin
.y - my / newscale;
zoomHelper.stage.setOffset({
x: zoomHelper.origin.x,
y: zoomHelper.origin.y
});
zoomHelper.stage.setScale({
x: newscale,
y: newscale
});
zoomHelper.stage.draw();
zoomHelper.scale *= zoom;
preCalculation();
}
};
// Code goes here
var w = window.innerWidth;
var h = window.innerHeight;
var height, minX, minY, maxX, maxY;
var stage = new Konva.Stage({
container: 'container',
width: w,
height: h
});
zoomHelper.stage =stage;
var layer = new Konva.Layer({
draggable: true,
dragBoundFunc: function(pos) {
console.log('called');
var X = pos.x;
var Y = pos.y;
if (X < minX) {
X = minX;
}
if (X > maxX) {
X = maxX;
}
if (Y < minY) {
Y = minY;
}
if (Y > maxY) {
Y = maxY;
}
return ({
x: X,
y: Y
});
}
});
stage.add(layer);
function preCalculation(){
// pre-calc some bounds so dragBoundFunc has less calc's to do
height = layer.getHeight();
minX = stage.getX() - layer.getWidth() / 2;
maxX = stage.getX() + stage.getWidth() - layer.getWidth() / 2;
minY = stage.getY() - layer.getHeight() / 2;
maxY = stage.getY() + stage.getHeight() - layer.getHeight() / 2;
console.log(height, minX, minY, maxX, maxY);
}
preCalculation();
var img = new Image();
img.onload = function() {
var floorImage = new Konva.Image({
image: img,
width: w,
height: h
});
layer.add(floorImage);
layer.draw();
};
img.src = 'https://s.yimg.com/pw/images/coverphoto02_h.jpg.v3';
$(stage.container).on('mousewheel DOMMouseScroll', zoomHelper.zoom);
使用 dragBoundFunc
时,您必须返回图层的绝对位置。当您更改顶部节点(阶段)的属性时,可能很难保持绝对位置。因此,您可以尝试在"dragmove"事件中设置绑定函数:
layer.on('dragmove', function() {
var x = Math.max(minX, Math.min(maxX, layer.x()));
var y = Math.max(minY, Math.min(maxY, layer.y()));
layer.x(x);
layer.y(y);
});
http://plnkr.co/edit/31MUmOjXBUVuaHVJsL3c?p=preview
相关文章:
- OpenLayers.Layer.Text在0,0处显示图标
- Googlemaps Javascript API KML layer - Using Open charge map
- OpenLayers Google layer in japanese
- Jcanvas layer collision
- 如何在 Konvajs 中向 Konva.Image() 对象添加纹理
- 错误导致Konva.js舞台上不时显示任何内容.怎么办
- Konva 在层之间传播事件
- 关闭/打开 Google Fusion Layer (Google Javascript API v3)
- 拖动绑定与 Konva.Layer
- Javascript v3 Fusion Table Layer - ROWID in where clause
- layer.find获胜't通过id返回kinetijs对象,尽管它存在
- 如何访问css,如:--paper-spinner-layer-1-color:var(--paper-light-bl
- 通过使用Fusion Table Layer平移和缩放以显示查询结果
- Konva从点击事件中获取图像ID
- Konva addEventListener点击多个图像
- ArcGIS interactive KML layer
- 在Open Layer中右键单击Feature Vector (Javascript)
- 从另一个文件中添加具有特定id的元素到data-layer= galleria
- 无效的& # 39;instanceof # 39;在GeoExt3中操作ol3 .layer. base
- 关闭Google v3 API InfoWindow,使用FusionTables Layer