KonvaJS:如何根据当前鼠标位置获得缩放和移动层的位置？
KonvaJS:如何根据当前鼠标位置获得缩放和移动层的位置？
提问于 2019-07-03 03:31:42
这是我的Konva对象设计:一个阶段，包括两个层。一层是我拖放形状的工具栏，一层是我把元素放到其中的画布。画布层可以缩放，并且是可拖动的(相对缩放的特性是从拉夫特恩的演示Pointer.html实现的)。
当用户从工具栏中删除一个形状时，一个新的形状将被添加到画布层，并且应该具有与用户监视它的位置相同的位置。因此，在我将缩放放入我的程序之前，唯一需要考虑的是根据图层的偏移量：toPush.x = toPush.x - this.refs.layer2.attrs.x; //toPush.x = Stage mouseX position toPush.y = toPush.y - this.refs.layer2.attrs.y; //toPush.y = Stage mouseY position修改位置
为了达到这种效果，我采用了基于鼠标位置的拉夫特恩缩放方法，对图层进行缩放和移动。
我的反应代码看起来是：
<Stage ...>
<Layer onWheel={this.onWheel} x={this.state.layerX} y={this.state.layerY} >
... all the shapes...
</Layer>
</Stage>
onWheel = () => {
const scaleBy = 1.1;
const stage = this.refs.graphicStage;
const layer = this.refs.layer2;
const oldScale = layer.scaleX();
const mousePointTo = {
x: stage.getPointerPosition().x / oldScale - this.state.layerX / oldScale,
y: stage.getPointerPosition().y / oldScale - this.state.layerY / oldScale
};
const newScale =
event.evt.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
layer.scale({ x: newScale, y: newScale });
this.setState({
layerScale: newScale,
layerX:
-(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale,
layerY:
-(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale
});
}但是在实现缩放之后，当我拖放形状时，它们不会落在我看到的地方，有趣的是，当我把它们放置的位置离(x:0，y:0)越远，它们就越倾向于(0,0)。
这是最合理的代码，我试着计算新的位置，以便使物体降落在它们应该掉落的地方。
toPush.x = toPush.x - this.state.layerX; //this.state.layerX = layer's X offset toPush.y = toPush.y - this.state.layerY;toPush.x = toPush.x - (this.state.layerX) * layer's scale; toPush.y = toPush.y - this.state.layerY * layer's scale;
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-03 13:01:21
您可以使用此演示来计算相对位置：Position.html
使用react-konva，它可能如下所示：
import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Circle } from "react-konva";
const App = () => {
const [localPos, setPos] = React.useState({ x: 0, y: 0 });
const layerRef = React.useRef();
return (
<React.Fragment>
Try to move the mouse over stage
<Stage
width={window.innerWidth}
height={window.innerHeight}
onMouseMove={e => {
var transform = layerRef.current.getAbsoluteTransform().copy();
// to detect relative position we need to invert transform
transform.invert();
// now we find relative point
const pos = e.target.getStage().getPointerPosition();
var circlePos = transform.point(pos);
setPos(circlePos);
}}
>
<Layer x={50} y={50} scaleX={0.5} scaleY={2} ref={layerRef}>
<Circle radius={50} fill="green" x={localPos.x} y={localPos.y} />
</Layer>
</Stage>
</React.Fragment>
);
};
render(<App />, document.getElementById("root"));https://codesandbox.io/s/react-konva-relative-pos-demo-k6num
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56862547
复制相关文章
相似问题
腾讯云开发者
