我正在尝试使用 react konva 在 omage 上绘制矩形 我想在图像被放大/缩小时根据鼠标指针位置和鼠标滚轮事件绘制一个矩形,但问题是矩形是根据位置绘制的图片不是舞台请帮我解决这个问题
请参考我用来放大和缩小图像的代码
zoom=()=>{
var oldScale = this.refs.layer.attrs.scaleX;
mousePointTo = {
x: this.props.x / oldScale - this.refs.layer.attrs.x / oldScale,
y: this.props.y/ oldScale - this.refs.layer.attrs.y / oldScale,
};
newScale = this.props.variation > 0 ? oldScale * this.props.scaleBy : oldScale / this.props.scaleBy;
newPos = {
x: -(mousePointTo.x - this.props.x / newScale) * newScale,
y: -(mousePointTo.y - this.props.y / newScale) * newScale
};
this.setState({newposx:newPos.x,newposy:newPos.y,newScale:newScale})
}
handleClick = (e) => {
if (this.state.isDrawing) {
this.setState({
isDrawing: !this.state.isDrawing,
});
return;
}
const newShapes = this.state.shapes.slice();
newShapes.push({
x: e.evt.layerX,
y: e.evt.layerY,
});
this.setState({
isDrawing: true,
shapes: newShapes,
});
}
handleMouseMove = (e) => {
if (!this.state.isDrawingMode) {
return;
}
const mouseX = e.evt.layerX;
const mouseY = e.evt.layerY;
if (this.state.isDrawing) {
const currShapeIndex = this.state.shapes.length - 1;
const currShape = this.state.shapes[currShapeIndex];
const newWidth = mouseX - currShape.x;
const newHeight = mouseY - currShape.y;
const newShapesList = this.state.shapes.slice();
newShapesList[currShapeIndex] = {
x: currShape.x,
y: currShape.y,
width: newWidth,
height: newHeight
}
this.setState({
shapes: newShapesList,
});
}
}
render() {
return (
<Stage
ref='stage'
width={this.props.width}
height={this.props.height}
onContentClick={this.handleClick}
onContentMouseMove={this.handleMouseMove}
draggable="true"
>
<Layer ref='layer' width={this.props.width}
height={this.props.height} x={this.state.newposx}
y={this.state.newposy}
scaleX={this.state.newScale}
scaleY={this.state.newScale}>
<Image
width={this.props.width}
height={this.props.height}
image={this.props.image}
ref={(node) => {this.imageNode = node;}}
/>
{this.state.shapes.map((shape) => {
return (
<Group>
<Rect
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
isDrawingMode={this.state.isDrawingMode}
draggable="true"
}}
/>
</Group >
);
})}
</Layer>
</Stage>
</div>
);
}
}