Vue.js 如何在Konva.js中创建冲突
有人知道如何使用Konva.js在Vue.js中创建层冲突吗?例如,我有一个正方形,中间是小点。我要做的是在一个正方形里挡住圆点。我们可以把数据拖来拖去,但不能把它拖出广场。我真的很感激你的帮助Vue.js 如何在Konva.js中创建冲突,vue.js,konvajs,Vue.js,Konvajs,有人知道如何使用Konva.js在Vue.js中创建层冲突吗?例如,我有一个正方形,中间是小点。我要做的是在一个正方形里挡住圆点。我们可以把数据拖来拖去,但不能把它拖出广场。我真的很感激你的帮助 var vm = this; const stage = vm.$refs.stage.getStage(); var layer = new Konva.Layer(); var group = new Konva.Group({ x: 100, y: 100,
var vm = this;
const stage = vm.$refs.stage.getStage();
var layer = new Konva.Layer();
var group = new Konva.Group({
x: 100,
y: 100,
draggable: false
});
var text = new Konva.Text({
x: 10,
y: 10,
fontFamily: "Calibri",
fontSize: 24,
text: "",
fill: "black"
});
var rect = new Konva.Rect({
clearBeforeDraw: true,
x: 50,
y: 50,
width: 100,
height: 50,
fill: "green",
stroke: "black"
});
var circle = new Konva.Circle({
clearBeforeDraw: true,
x: this.x,
y: this.y,
radius: 10,
fill: "red",
stroke: "black",
strokeWidth: 4,
containment: rect,
draggable: true,
name: "fillShape"
});
circle.on("dragmove", function() {
that.x = this.getX();
that.y = this.getY();
});
group.add(rect, circle);
layer.add(group);
stage.add(layer);
在圆形对象中添加dragBoundFunc,并设置矩形绝对宽度和高度的限制
var circle = new Konva.Circle({
clearBeforeDraw: true,
x: 75,
y: 75,
radius: 10,
fill: "red",
stroke: "black",
strokeWidth: 4,
containment: rect,
draggable: true,
name: "fillShape",
dragBoundFunc: function(pos) {
const x = Math.min(250-12, Math.max(pos.x, 150+12));
const y = Math.min(200-12, Math.max(pos.y, 150+12));
return {x, y};
}
});
看看感谢你的帮助:D