vue.js - 如何在 Konva.js 中创建碰撞
问题描述
有人知道如何使用 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);
解决方案
在圆形对象中添加 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};
}
});
推荐阅读
- gitlab-ci - 仅当特定位置发生更改时,Gitlab CICD 才运行步骤
- r - 有没有办法使用 vtable 输出标准错误?
- angularjs - 使用 AngularJs 将 base64 格式的数据转换为图像
- google-analytics - 谷歌标签管理器不跟踪图片点击
- python - 通过内存修改使变量变为负数
- mongodb - MongoDB:分组 $sortByCount?
- r - 将数据框中的一列字符串转换为R中的非常大的整数
- dataframe - 解释异常值的 sns.pairplot 图像
- node.js - 使用 Node.js 的 Azure Cosmos DB ChangeFeed
- reactjs - Accordion.Toggle 错误:React.jsx:类型无效