2

我正在使用 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});
    }

样品连接器

  1. 首先，连接器意味着形状不应跨越矩形或不能进入矩形边界内。
  2. 连接后，单个形状或矩形不应移动，而是像一组一样集体移动
4

0 回答 0