我有一个矩形 SVG,可以在二维平面上拖动、围绕自身原点旋转和调整大小。
点击并拖动主体可以在平面上移动,右侧的蓝色圆圈旋转,右下角的正方形调整大小。
调整大小、在平面上移动和从0度旋转都能按预期工作。
问题出现在我尝试在旋转后调整大小时,SVG 的宽度和高度会改变,就好像它没有被旋转过一样。
我的问题是,如何才能通过缩放形状的宽度、高度、x 和 y 来实现更像 Photoshop 或 http://editor.method.ac/ 处理旋转元素调整大小的用户体验?
这里有一个完整的示例在 JSBin 中 https://jsbin.com/mapumif/edit?js,output 注意:JSBin 似乎存在缺陷,如果无法立即呈现,请多次点击“Run with JS”按钮。
我正在使用一个 React 组件来保持状态,但任何解决方案都是非常欢迎的。
class SVG extends React.Component {
constructor(props) {
super(props)
this.state = {
x: 100,
y: 100,
width: 50,
height: 50,
angle: 0,
focusedElement: null
}
}
handleMouseDown = (e) => {
const focusedElement = e.target.getAttribute('data-element-type')
this.setState({focusedElement})
}
handleMouseMove = (e) => {
const {focusedElement} = this.state
if (!focusedElement) return
else if (focusedElement === 'rectangle') this.moveRectangle(e)
else if (focusedElement === 'resize') this.resizeRectangle(e)
else if (focusedElement === 'rotate') this.rotateRectangle(e)
}
handleMouseUp = () => {
this.setState({focusedElement: null})
}
moveRectangle = (e) => {
const {width, height} = this.state
this.setState({
x: e.clientX - width / 2,
y: e.clientY - height / 2
})
}
resizeRectangle = (e) => {
const {x, y} = this.state
this.setState({
width: e.clientX - x,
height: e.clientY - y
})
}
rotateRectangle = (e) => {
const {x, y, width, height} = this.state
const origin = {
x: x + (width / 2),
y: y + (height / 2),
}
const angle = Math.atan2(
e.clientY - origin.y,
e.clientX - origin.x
) * 180 / Math.PI
this.setState({angle})
}
render() {
const {width, height, x, y, angle} = this.state
return (
<svg
viewPort="0 0 300 300"
style={{width: 300, height: 300, backgroundColor: '#999'}}
onMouseUp={this.handleMouseUp}
onMouseMove={this.handleMouseMove}
onMouseDown={this.handleMouseDown}
>
<g
transform={`
translate(${x}, ${y})
rotate(${angle}, ${(width / 2)}, ${(height / 2)})
`}
>
<rect
width={width}
height={height}
fill="salmon"
data-element-type="rectangle"
/>
<rect
width={10}
height={10}
x={width - 10}
y={height - 10}
data-element-type="resize"
fill="black"
/>
<circle
r="7"
cx={width + 7}
cy={height / 2}
data-element-type="rotate"
fill="blue"
/>
</g>
</svg>
)
}
}
ReactDOM.render(<SVG />, document.getElementById('app'))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
调整大小、在平面上移动和从0度旋转都能按预期工作。
问题出现在我尝试在旋转后调整大小时,SVG 的宽度和高度会改变,就好像它没有被旋转过一样。
我的问题是,如何才能通过缩放形状的宽度、高度、x 和 y 来实现更像 Photoshop 或 http://editor.method.ac/ 处理旋转元素调整大小的用户体验?
这里有一个完整的示例在 JSBin 中 https://jsbin.com/mapumif/edit?js,output 注意:JSBin 似乎存在缺陷,如果无法立即呈现,请多次点击“Run with JS”按钮。
我正在使用一个 React 组件来保持状态,但任何解决方案都是非常欢迎的。
感谢您的关注,任何见解都将不胜感激。