如何在vuejs中使用konvajs使用一条线连接2个对象? [英] How to connect 2 objects using a line using konvajs in vuejs?
问题描述
早上好，我发现自己在使用 Konvajs 库，
有很多方法可以实现这样的功能.基本上，您只需要监听 mousedown、mousemove 和 mouseup 事件即可了解何时画线.您还可以添加 touchstart、touchmove 和 touchend 事件来支持移动设备:
<div><v-阶段参考=舞台":config="stageSize"@mousedown="handleMouseDown"@mouseup="handleMouseUp"@mousemove="handleMouseMove"><v层><v线v-for="连接线":key="line.id":配置={笔画:'黑色'，点:line.points}"/><v-圆v-for="目标中的目标":key="target.id":配置={x: 目标.x,y:目标.y，半径:40，笔画:'黑色'，填充:'绿色'}"/><v-text :config="{ text: '尝试拖动连接对象'}"/></v层><v-layer ref="dragLayer"></v-layer></v-stage></模板><脚本>从konva"导入Konva；const width = window.innerWidth;const height = window.innerHeight;让 vm = {};函数 generateTargets() {const 圈 = [];for (var i = 0; i <10; i++) {圆圈.推({x: 宽度 * Math.random(),y: 高度 * Math.random(),身份证:我});}返回圈子；}导出默认{数据() {返回 {舞台大小:{宽度:宽度，高度:高度},目标:生成目标()，连接:[]，绘图线:假};},方法: {handleMouseDown(e) {const onCircle = e.target instanceof Konva.Circle;如果(！onCircle){返回;}this.drawningLine = true;this.connections.push({id: Date.now(),点数:[e.target.x(), e.target.y()]});},handleMouseMove(e) {如果(！this.drawningLine){返回;}const pos = e.target.getStage().getPointerPosition();const lastLine = this.connections[this.connections.length - 1];lastLine.points = [lastLine.points[0], lastLine.points[1], pos.x, pos.y];},handleMouseUp(e) {const onCircle = e.target instanceof Konva.Circle;如果(！onCircle){返回;}this.drawningLine = false;const lastLine = this.connections[this.connections.length - 1];lastLine.points = [lastLine.points[0],lastLine.points[1],e.target.x(),e.target.y()];}}};
演示:https://codesandbox.io/s/vue-konva-connection-objects-qk2ps
Good morning, I find myself working with the Konvajs library, https://github.com/konvajs/vue-konva
There is the following documentation: https://konvajs.org/docs/sandbox/Connected_Objects.html, but I can't implement it with vuejs
Since what I need to do is that when selecting object 1, I can drag and form the arrow and when selecting object 2, they are linked
Currently I have built the following:
<template>
<v-container>
<v-stage :config="configKonva">
<v-layer>
<v-circle :config="configCircle"></v-circle>
</v-layer>
<v-layer>
<v-circle :config="configCircleA"></v-circle>
</v-layer>
</v-stage>
</v-container>
</template>
<script>
export default {
data(){
return {
configKonva: {
width: 200,
height: 200
},
configCircle: {
x: 100,
y: 100,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4,
draggable: true
},
configCircleA: {
x: 100,
y: 100,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4,
draggable: true
}
}
},
}
</script>
Visually I have only created the circles, I lack the connection of these 2 through a line
There are many ways to implement such functionality. Basically, you just need to listen to mousedown, mousemove and mouseup events to understand when to draw lines. You can also add touchstart, touchmove and touchend events to support mobile devices:
<template>
<div>
<v-stage
ref="stage"
:config="stageSize"
@mousedown="handleMouseDown"
@mouseup="handleMouseUp"
@mousemove="handleMouseMove"
>
<v-layer>
<v-line
v-for="line in connections"
:key="line.id"
:config="{
stroke: 'black',
points: line.points
}"
/>
<v-circle
v-for="target in targets"
:key="target.id"
:config="{
x: target.x,
y: target.y,
radius: 40,
stroke: 'black',
fill: 'green'
}"
/>
<v-text :config="{ text: 'Try to drag-to-connect objects'}"/>
</v-layer>
<v-layer ref="dragLayer"></v-layer>
</v-stage>
</div>
</template>
<script>
import Konva from "konva";
const width = window.innerWidth;
const height = window.innerHeight;
let vm = {};
function generateTargets() {
const circles = [];
for (var i = 0; i < 10; i++) {
circles.push({
x: width * Math.random(),
y: height * Math.random(),
id: i
});
}
return circles;
}
export default {
data() {
return {
stageSize: {
width: width,
height: height
},
targets: generateTargets(),
connections: [],
drawningLine: false
};
},
methods: {
handleMouseDown(e) {
const onCircle = e.target instanceof Konva.Circle;
if (!onCircle) {
return;
}
this.drawningLine = true;
this.connections.push({
id: Date.now(),
points: [e.target.x(), e.target.y()]
});
},
handleMouseMove(e) {
if (!this.drawningLine) {
return;
}
const pos = e.target.getStage().getPointerPosition();
const lastLine = this.connections[this.connections.length - 1];
lastLine.points = [lastLine.points[0], lastLine.points[1], pos.x, pos.y];
},
handleMouseUp(e) {
const onCircle = e.target instanceof Konva.Circle;
if (!onCircle) {
return;
}
this.drawningLine = false;
const lastLine = this.connections[this.connections.length - 1];
lastLine.points = [
lastLine.points[0],
lastLine.points[1],
e.target.x(),
e.target.y()
];
}
}
};
</script>
DEmo: https://codesandbox.io/s/vue-konva-connection-objects-qk2ps
这篇关于如何在vuejs中使用konvajs使用一条线连接2个对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
