我在Vue.js中使用konva.js而我正在尝试使用组拖放。组中有矩形，矩形阴影和圆形。圆形是矩形，我希望它具有相对于矩形的位置。现在它的工作原理如下：当你拖动整个组（其中有一个圆圈的矩形）时，圆圈会保持或移动的方向与矩形不同。
我正在尝试创建一个随矩形移动的圆圈，但是单独的圆圈可以拖动：false，它应该只移动整个组。
制作Canvas我有3个步骤：
我在页面渲染时创建拖放阶段。
创建模态，我将圆圈定位在矩形内。
保存模态圆之后的坐标被存储并用于可拖动的新矩形中，拖放区域（圆圈不可拖动 - 它应该留在矩形内）。
有人可以帮忙：D？
我的代码：
<template>
<div id="main">
<h1></h1>
<div class="row">
<div id="container" style="width: 500px; height: 600px;" class="col-md-6">
<v-stage ref="stage" :config="configKonva">
</v-stage>
</div>
<div class="col-md-6">
<button class="green btn btn-primary btn-sm" @click="openModal()">
Modal
</button>
<div class="col-md-6">
<div>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
</div>
<form-virus-modal v-if="showModal" v-on:close.once="close(); afterModalCanvas()"/>
</div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import draggable from "vuedraggable";
import FormVirusModal from '../../components/modals/CreatingVirus.vue';
import swal from "sweetalert2";
import VueKonva from "vue-konva";
export default {
name: "EnumCurrencyIndex",
$mount: "#main",
components: {
draggable,
FormVirusModal,
},
data() {
return {
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}, {
value: 'Option3',
label: 'Option3'
}, {
value: 'Option4',
label: 'Option4'
}, {
value: 'Option5',
label: 'Option5'
}],
value: '',
model: [],
editable: true,
isDragging: false,
delayedDragging: false,
editedElement: null,
newElement: "",
showModal: false,
list: [],
blockSnapSize: 99,
stage: null,
shadowRectangle: null,
rectangle: null,
configKonva: {
width: 300,
height: 300
},
vm: {}
};
},
beforeMount() {
this.fetchData();
},
computed: {
dragOptions() {
return {
animation: 0,
group: "description",
disabled: !this.editable,
ghostClass: "ghost"
};
},
listString() {
return this.model;
},
dragCanvas() {
return this.model;
},
coordinates() {
return this.$store.getters.vir;
}
},
watch: {
$route: "fetchData",
isDragging(newValue) {
if (newValue) {
this.delayedDragging = true;
return;
}
this.$nextTick(() => {
this.delayedDragging = false;
});
}
},
methods: {
close() {
this.showModal = false;
this.refresh = true;
},
openModal() {
this.showModal = true;
},
mainCanvas() {
var width = 300;
var height = 300;
var shadowOffset = 10;
var tween = null;
var vm = this;
const stage = vm.$refs.stage.getStage();
var blockSnapSize = 99;
var gridLayer = new Konva.Layer();
var padding = blockSnapSize;
console.log(width, padding, width / padding);
for (var i = 0; i < width / padding; i++) {
gridLayer.add(new Konva.Line({
points: [Math.round(i * padding) + 0.5, 0, Math.round(i * padding) + 0.5, height],
stroke: '#ddd',
strokeWidth: 1,
}));
}
gridLayer.add(new Konva.Line({points: [0,0,10,10]}));
for (var j = 0; j < height / padding; j++) {
gridLayer.add(new Konva.Line({
points: [0, Math.round(j * padding), width, Math.round(j * padding)],
stroke: '#ddd',
strokeWidth: 0.5,
}));
}
stage.add(gridLayer);
},
afterModalCanvas() {
var that = this
var vm = this;
const stage = vm.$refs.stage.getStage();
var rectangle = this.rectangle;
var shadowRectangle = this.shadowRectangle;
var blockSnapSize = 99;
shadowRectangle = new Konva.Rect({
x: 0,
y: 0,
width: blockSnapSize,
height: blockSnapSize,
fill: '#FF7B17',
opacity: 0.6,
stroke: '#CF6412',
strokeWidth: 3,
dash: [20, 2]
});
var circle = new Konva.Circle({
clearBeforeDraw: true,
x: this.coordinates.x,
y: this.coordinates.y,
radius: 10,
fill: "red",
stroke: "black",
strokeWidth: 1,
containment: rectangle,
name: "fillShape",
dragBoundFunc: function(pos) {
const x = Math.min(250-12, Math.max(pos.x, 150+12));
const y = Math.min(250-12, Math.max(pos.y, 150+12));
return {x, y};
}
});
rectangle = new Konva.Rect({
x: 1,
y: 1,
width: blockSnapSize,
height: blockSnapSize,
fill: '#fff',
stroke: '#ddd',
strokeWidth: 1,
draggable: true,
dragBoundFunc: function(pos) {
const x = Math.min(200, Math.max(pos.x, 1));
const y = Math.min(200, Math.max(pos.y, 1));
return {x, y};
}
});
var group = new Konva.Group({
x: 100,
y: 100,
draggable: true
});
group.on('dragstart', (e) => {
shadowRectangle.show();
shadowRectangle.moveToTop();
rectangle.moveToTop();
});
group.on('dragend', (e) => {
rectangle.position({
x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
});
circle.position({
x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
});
stage.batchDraw();
shadowRectangle.hide();
});
group.on('dragmove', (e) => {
shadowRectangle.position({
x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
});
circle.position({
x: Math.round(circle.x() / blockSnapSize) * blockSnapSize,
y: Math.round(circle.y() / blockSnapSize) * blockSnapSize
});
stage.batchDraw();
});
var layer = new Konva.Layer();
shadowRectangle.hide();
group.add(shadowRectangle ,rectangle, circle);
layer.add(group);
stage.add(layer);
},
mounted() {
this.mainCanvas();
},