[英]How to rotate shape with transform
I have a rectangle which I am rotating it to -45 but on drag the rotation is not applied. 我有一个将其旋转到-45的矩形,但是在拖动时不应用旋转。
Code: 码:
function createPoly(x, y)
{
var width = 41;
var height = 41;
var centreX = width / 2;
var centreY = height / 2;
var shape = d3.select(this);
var poly = svg.append("g")
.classed("bpmnGateway", true)
.append('svg:rect')
.attr("type", "poly")
.attr("x", (x - centreX))
.attr("y", (y - centreY))
.attr("width", 41)
.attr("height", 41)
.attr("transform", "rotate(-45)")
.attr("stroke-width", "1.5px")
.attr("stroke", "#7E7E7E")
.style('cursor', 'move')
.style("fill", "#FFED6B")
.call(drag);
}
function drag()
{
if (shape.attr('type') === 'poly')
{
translate = d3.transform(shape.attr("transform")).translate;
var x = d3.event.dx + translate[0];
var y = d3.event.dy + translate[1];
shape.attr("transform", "rotate(-45)")
shape.attr("transform", "translate(" + x + "," + y + ")");
}
}
I tried with rotate option inside drag function which didn't work. 我在拖动功能中尝试了旋转选项,但没有用。 How do I get it to work?
我如何使它工作?
The second attr function overwrites the first. 第二个attr函数将覆盖第一个。 You could just do both in one eg
您可以将两者合而为一
shape.attr("transform", "rotate(-45) translate(" + x + "," + y + ")");
or 要么
shape.attr("transform", "translate(" + x + "," + y + ") rotate(-45)");
Depending on the order you want the transforms to be applied. 根据您要应用转换的顺序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.