- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个矩形 svg,可以围绕二维平面拖动,围绕它自己的原点旋转并调整大小。
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 的 width
和 height
发生变化,就好像它没有被旋转一样
我的问题是,您如何缩放 width
、height
、x
和 y
形状以实现更像 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/
这是一种复杂的情况。我正在重构(从头开始)c++,它必须用作 CGI 脚本和独立应用程序的核心。 遗憾的是,我从大学开始就没有写过C++,对c#/Java比较熟悉。所以我打算将 WPF 用于 GUI。
您好,我正在尝试找出与此线程中提出的问题相同的问题 How to use CSS to surround a number with a circle? 但是 - 每次我这样做时,形状都会变成椭圆形,
如果您在单个语句中执行某些操作,例如“abc”+ stringval +“abc”,那么是一个不可变的字符串副本,还是两个(注意 abc 和 123 在编译时是常量) 奖励回合:使用像下面这样的 St
我正在尝试创建一个查询,该查询只会在满足某些条件的情况下添加 AND 子句。 这就是我所追求的: SELECT DISTINCT id name active FROM team WHER
在使用 Google 的出色绘图工具进行了一些试验后,我正在使用 Gnuplot 绘制几个 3D 图形。我喜欢 Google 工具的一件事是它在表面周围绘制的“边界框”,这让我更容易看到大小。 有没有
我们最近从solr迁移到 Elasticsearch 。 因此决定以自定义查询格式编写一个包装器,该包装器将转换为 Elasticsearch 查询。将来,如果我们更改为另一个数据存储,则只需要修改此
我有以下内容将音频剪辑的频率绘制为条形音箱: const drawSinewave = function() { requestAnimationFrame(drawSinewave);
我试图围绕其父矩形的中心旋转一个矩形。 child 到 parent 边界的距离必须始终保持不变。我几乎成功了,但我的方法似乎有一个小错误。我似乎找不到问题所在。 示例: http://jsfiddl
我有一个帮助类来将用户对象保存到共享首选项。我用过 serialize(): String函数和 create(serializedString: String)我的 User 中的函数数据模型。他们
是否可以围绕 UIBezierPath 的可见部分绘制路径? 这是我的问题的一个例子 这是我想要完成的 这是我到目前为止得到的: - (void)drawRect:(CGRect)rect { C
这里,AsciiChecker启用文本形式的矩阵规范。 abstract class AsciiChecker extends AlgoritmicChecker { String[] asc
目前,我有十个不同的查询,它们通过 JDBC 处理,并包装在返回 ResultSet 的函数中。这些 ResultSet 对象中的每一个都由外部程序进行迭代,并将通过其索引而不是根据要求的列名进行访问
围绕 finder 方法启动事务是否明智: @Transactional public E getParticularEvent(final String id) { return (E)em
我需要一个围绕 Canvas 边缘移动的圆圈。向右然后向下移动可以正常工作,但是当它需要向左移动时,它会跳到右下角并开始一次又一次地向右移动。我不知道如何解决这个问题。 var can = doc
我正在尝试我的第一个 jQuery 插件。 (耶……时间到了!) 我很难思考如何让一个可公开访问的函数正常启动。 代码 (function($, doc, win){ "use strict"
在阅读了很多关于绕相机旋转的指南并询问了一些关于 SO 的其他问题后,我想到了 SSCCE我到目前为止所拥有的。也许这样其他人会更容易理解我需要什么,对我来说答案是什么。 到目前为止它看起来像这样:
这里是 Java 菜鸟!我正在努力为我正在编写的 Android 应用程序画龙点睛。本质上,它是一个 RSS 阅读器。异步任务获取 RSS 提要。然后对其进行解析,我想做的最后一点是使用已解析的 RS
我有以下代码,从数据库的“类(class)”表中选择标题和图像。 setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
我正在尝试实现一个表盘,其中一只手的位图图像围绕 Canvas 上的表盘中心旋转。 基本上在 onDraw() 方法中,我希望能够将图像资源放到 Canvas 上,然后每秒旋转一次。 我有每秒触发一次
我从 SwingX 找到了一个名为 JXLoginPane 的组件在 WindowBuilder 中可用,这似乎是我尝试做的事情的一个很好的起点,但我需要有关如何使用它的更多信息。到目前为止,我发现唯
我是一名优秀的程序员,十分优秀!