首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何用变换旋转形状

如何用变换旋转形状
EN

Stack Overflow用户
提问于 2015-08-13 12:02:02
回答 1查看 140关注 0票数 1

我有一个矩形,我把它旋转到-45,但是在拖动时,旋转是不适用的。

代码:

代码语言:javascript
运行
复制
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 + ")");
    }
}

我尝试了旋转选项,内部拖动功能,但没有工作。我怎么才能让它起作用?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-13 12:06:11

第二个attr函数覆盖第一个。你可以同时做这两件事。

代码语言:javascript
运行
复制
   shape.attr("transform", "rotate(-45) translate(" + x + "," + y + ")");

代码语言:javascript
运行
复制
   shape.attr("transform", "translate(" + x + "," + y + ") rotate(-45)");

根据您希望应用转换的顺序而定。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31987674

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档