如何通過變換旋轉形狀

Question

我有一個將其旋轉到-45的矩形，但是在拖動時不應用旋轉。

碼：

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 + ")");
    }
}

我在拖動功能中嘗試了旋轉選項，但沒有用。 我如何使它工作？

Answer 1

第二個attr函數將覆蓋第一個。 您可以將兩者合而為一

   shape.attr("transform", "rotate(-45) translate(" + x + "," + y + ")");

要么

   shape.attr("transform", "translate(" + x + "," + y + ") rotate(-45)");

根據您要應用轉換的順序。