缩放阶段和拖动元素的相对位置不起作用

Question

在KonvaJS React的缩放阶段中，计算实时位置的问题很小。在我的示例中，我有两个Rect的小（红色）位置相对于大Rect（黄色），而拖动大矩形时，一个小位置相对于大import React from "react"; import ReactDOM from "react-dom"; import { Rect, Stage, Layer } from "react-konva"; import "./styles.css"; function Box({ attrs, draggable, updateAttr }) { const onDragStart = e => { const element = e.target; if (typeof updateAttr === "function") { updateAttr(element._lastPos); } }; const onDragMove = e => { const element = e.target; if (typeof updateAttr === "function") { updateAttr(element._lastPos); } }; const onDragEnd = e => { const element = e.target; if (typeof updateAttr === "function") { updateAttr(element._lastPos); } }; return ( <Rect draggable={draggable} onDragEnd={onDragEnd} onDragMove={onDragMove} onDragStart={onDragStart} fill={attrs.fill} x={attrs.x} y={attrs.y} width={attrs.width} height={attrs.height} /> ); } const calculatePos = ({ r1, r2 }) => ({ ...r2, x: parseInt(r1.width + r1.x + 10, 10), y: parseInt(r1.y + r1.height / 2 - r2.height / 2, 10) }); const boxAttr = { x: 50, y: 50, width: 200, height: 150, fill: "yellow" }; const secondAttr = calculatePos({ r2: { fill: "red", width: 20, height: 20 }, r1: boxAttr }); class App extends React.Component { state = { scale: 1, boxAttr, secondAttr }; updateScale = scale => { this.setState({ scale }); }; updateAttr = pos => { const { secondAttr, boxAttr } = this.state; this.setState({ secondAttr: calculatePos({ r2: secondAttr, r1: { ...boxAttr, ...pos } }) }); }; render() { const { scale, boxAttr, secondAttr } = this.state; return ( <div className="App"> <button onClick={() => { this.updateScale((parseFloat(scale) + 0.1).toFixed(1)); }} > + Scale ({scale}) </button> <button onClick={() => { this.updateScale((parseFloat(scale) - 0.1).toFixed(1)); }} > - Scale ({scale}) </button> <Stage scaleX={scale} scaleY={scale} width={window.innerWidth} height={window.innerHeight} > <Layer> <Box updateAttr={this.updateAttr} draggable={true} attrs={boxAttr} /> <Box draggable={false} attrs={secondAttr} /> </Layer> </Stage> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 移动，但是当我向上或向下缩放时小一个在x，y位置跳了一些像素。

Working example

yarn test web  --code-coverage

请帮助我为红色矩形更新正确的x，y。

---

  

我知道可分组拖动解决方案可以解决此问题，但是我无法   由于无法实现复杂的关系而无法在我的实际应用中实现   出于可拖动原因而分组

Answer 1

拖动第一个框时，必须将画布上的鼠标坐标转换为缩放后的画布内的坐标系，以移动第二个框。

我修改了updateAttr方法。

但是有一个陷阱，当konva本身（在dragEnd事件之后）调用updateAttr时，它会使用转换后的坐标进行调用。这就是为什么我在updateAttr中添加了第二个参数doScale。自己调用时，将其设置为true，它将转换坐标；如果konva调用它，则没有第二个参数，并且它的计算结果为false，并且不进行转换。

该代码位于：https://codesandbox.io/s/6126wz0kkk