有人知道如何使用Konva.js在Vue.js中创建图层碰撞?例如,我有一个正方形,中间是小点。我想要的是阻止正方形内的点。我们可以拖动dto但我们无法将其拖出方块。我真的很感激你的帮助:D
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);
答案 0 :(得分:1)
在圆形对象中添加dragBoundFunc,并将限制设置为矩形的绝对宽度和高度
id CARRIER_NAME CLAIM_TYPE STATUS DATE TAG_NAME RERUN
9 QA_T_MOB Approved Passed 2018-05-15 Theft 0
10 QA_T_MOB Denied Passed 2018-05-15 Denied 0
11 QA_T_MOB In Review Passed 2018-05-15 In Review 0
12 QA_T_MOB Approved Failed 2018-05-15 mytag 1