gpt4 book ai didi

javascript - 调整 SVG 的大小围绕其原点旋转

转载 作者:行者123 更新时间:2023-12-05 02:16:13 25 4
gpt4 key购买 nike

我有一个矩形 svg,可以围绕二维平面拖动,围绕它自己的原点旋转并调整大小。

enter image description here

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>

点击并拖动body允许在平面内移动,右边的蓝色圆圈旋转,右下角的正方形调整大小

调整大小、绕平面移动和从 0 度旋转都可以按需要工作

当我尝试在发生旋转后调整大小时出现问题,svg 的 widthheight 发生变化,就好像它没有被旋转一样

我的问题是,您如何缩放 widthheightxy形状以实现更像 photoshop 的用户体验或如何 http://editor.method.ac/处理调整旋转元素的大小?

这是 JSBin 中的完整示例 https://jsbin.com/mapumif/edit?js,output

注意 JSBin 似乎有问题,所以如果它没有立即呈现,请将“使用 JS 运行”按钮捣碎 10 倍左右

我正在使用 react 组件来保持状态,但任何解决方案都非常受欢迎

一如既往,感谢任何和所有见解,感谢您的关注

最佳答案

此解决方案的工作原理是在调整高度和宽度大小时使用矩阵变换来考虑形状的 Angular ,而 cos 和 sin 函数则考虑因调整宽度和高度大小时引起的坐标变化。

resizeRectangle = (e) => {
const {x, y, angle, width, height} = this.state

const point = this.svg.createSVGPoint()
point.x = e.clientX
point.y = e.clientY


const rotatedPoint = point.matrixTransform(
this.rect.getScreenCTM().inverse()
)

const widthDifference = rotatedPoint.x - width
const heightDifference = rotatedPoint.y - height

const widthOriginMovementRight = widthDifference * Math.cos(angle * Math.PI / 180)
const widthOriginMovementDown = widthDifference * Math.sin(angle * Math.PI / 180)
const heightOriginMovementRight = heightDifference * Math.cos((angle+90) * Math.PI / 180)
const heightOriginMovementDown = heightDifference * Math.sin((angle+90) * Math.PI / 180)
const sumMovementX = widthOriginMovementRight + heightOriginMovementRight - widthDifference
const sumMovementY = widthOriginMovementDown + heightOriginMovementDown - heightDifference


this.setState({
width: rotatedPoint.x,
height: rotatedPoint.y,
x: x + (sumMovementX /2) ,
y: y + (sumMovementY /2)
})

用于查找旋转点的相同技术也必须引入渲染逻辑

 render() {
const {width, height, x, y, angle, focusedElement, start} = this.state


if (this.svg) {
const point = this.svg.createSVGPoint()
point.x = x
point.y = y
var rotatedPoint = point.matrixTransform(
this.rect.getScreenCTM().inverse()
)
}

并在返回语句中

 return (
<div>
<svg
ref={node => this.svg = node}
viewPort="0 0 300 300"
style={{width: 300, height: 300, backgroundColor: '#999'}}
onMouseUp={this.handleMouseUp}
onMouseMove={this.handleMouseMove}
onMouseDown={this.handleMouseDown}
>

<g
transform={
((!focusedElement && !!rotatedPoint) || focusedElement === 'resize') ?
`
translate(${x}, ${y})
rotate(${angle})
translate(${-rotatedPoint.x}, ${-rotatedPoint.y})

`
:
`
translate(${x}, ${y})
rotate(${angle}, ${(width / 2)}, ${(height / 2)})
`
}
ref={node => this.rect = node}
>

关于javascript - 调整 SVG 的大小围绕其原点旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50402466/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com