在D3图中绕轴旋转rect
Rotate rect around axis in D3 graphs
我正在尝试获得一个在所有角上都有四个手柄的矩形,以按所需角度旋转rect
。有人能帮助我如何在拖动手柄的情况下绕其轴旋转rect
吗?
我确实找到了一个适用于ellipse
的示例,并尝试将其修改为rect
,但没有成功。
var w = 400,
h = 400,
data = {
x: 150,
y: 100,
rx: 50,
ry: 50,
angle: 0
};
// Returns radians
function angleBetweenPoints(p1, p2) {
if (p1[0] == p2[0] && p1[1] == p2[1])
return Math.PI / 2;
else
return Math.atan2(p2[1] - p1[1], p2[0] - p1[0] );
}
function distanceBetweenPoints(p1, p2) {
return Math.sqrt( Math.pow( p2[1] - p1[1], 2 ) + Math.pow( p2[0] - p1[0], 2 ) );
}
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 300);
var group = svg.append("svg:g").attr('id' , 'id123');
var handles = group.selectAll("circle")
.data([
{x:data.x, y:data.y + data.ry, name:"n"},
{x:data.x + data.rx, y:data.y, name:"e"},
{x:data.x, y:data.y - data.ry, name:"s"},
{x:data.x - data.rx, y:data.y, name:"w"}
], function (d) { return d.name; })
.enter()
.append("svg:circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 6.5)
.call(d3.behavior.drag()
.on("drag", function (d) {
// Resizing
var exy = [d3.event.x, d3.event.y],
dxy = [data.x, data.y],
dist = distanceBetweenPoints(exy, dxy),
angle = data.angle + angleBetweenPoints(dxy, exy);
switch(d.name) {
case "e":
case "w":
break;
case "s":
case "n":
angle += Math.PI/2;
break;
};
data.angle = angle;
update();
})
);
var ellipse = group.append("svg:ellipse");
function toDegrees(rad) {
return rad * (180/Math.PI);
}
function update() {
ellipse
.attr("cx", data.x)
.attr("cy", data.y)
.attr("rx", data.rx)
.attr("ry", data.ry);
group.attr("transform", "rotate(" + toDegrees(data.angle) + "," + data.x + "," + data.y + ")");
}
update();
http://jsfiddle.net/roug3/hon4kxp6/2/
首先制作一个矩形
var rect = group.append("svg:rect");
然后相应地放置矩形。
//place the rectangle in its place
function update() {
rect
.attr("x", data.x - data.rx +5)//the x coordinate
.attr("y", data.y - data.ry +5)
.attr("width", (data.rx*2)-10)//the width
.attr("height", (data.ry*2)-10);//the height
group.attr("transform", "rotate(" + toDegrees(data.angle) + "," + data.x + "," + data.y + ")");
}
此处的工作代码
此处矩形旋转的工作代码
希望这能有所帮助!
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 旋转后拖动对象
- 禁用旋转木马中的下一个按钮和上一个按钮
- 手动创建旋转活动指示器
- renderReact/Rect Router+Node/Express.js的服务器端/同构渲染中未定义renderP
- 如何在容器中定位旋转的图像
- D3.JS向rect添加缩放和列表项
- 在轴上旋转SVG图像
- 绕z轴旋转时出现iOS陀螺仪错误
- 旋转按钮[HTML][JS]
- 在JS中围绕旋转对象旋转对象
- Threejs-围绕中心旋转对象
- 旋转木马;启用内容安全策略时无法工作
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 菜单切换时箭头旋转
- 如何旋转rect,并且它仍然根据其旋转沿正确的方向移动
- 在D3图中绕轴旋转rect