Прекратить перетаскивание после подключения
Я использую библиотеку React-Konva для создания фигур с использованием моей палитры. Затем я перетаскиваю его для подключения. Но как только он подключен, он должен перетаскиваться для группы, должен работать только не для каждого элемента.
Я поместил различные переменные в переменную глобально в const.
const shapes=
<Group
draggable
>
<Shape
sceneFunc={(context, shape) => {
context.beginPath();
context.moveTo(300, 100);
context.lineTo(300, 100);
context.quadraticCurveTo(150, 100, 100, 100);
context.closePath();
context.fillStrokeShape(shape);
}}
fill="#eff0f1"
stroke="#222"
/>
<Circle
x={305}
y={100}
radius={10}
fill="#eff0f1"
stroke="#222"
/>
</Group>
const block=<Rect
x={2}
y={170}
width={100}
height={100}
draggable
fill="#eff0f1"
stroke="#222"
/>
Теперь, как только я проверяю кнопку палитры, я нажимаю переменную внутри массива, но как только соединитель переменной формы касается перемычки, он должен быть объединен в один элемент или сгруппирован.
<Stage width={950} height={585}>
<Layer>
<Group draggable>
{connector && multiConnector.map(shape=>{
return shape;
})}
{rect && multiBlock.map(block=>{
return block;
})}
</Group>
</Layer>
</Stage>
constructor(){
super();
this.state={
connector:false,
rect:false,
multiBlock:[],
multiConnector:[]
}
}
showConnector=() =>{
const { multiConnector } = this.state;
multiConnector.push(shapes);
this.setState({connector:true, multiConnector:multiConnector});
}
showRect=()=>{
const { multiBlock } = this.state;
multiBlock.push(block);
this.setState({rect:true, multiBlock:multiBlock});
}
- Во-первых, соединитель означает, что фигуры не должны пересекать прямоугольник или не могут выходить за границы прямоугольника.
- После соединения отдельные фигуры или прямоугольники не должны двигаться, а двигаться вместе как группа