Question

我有一个SVG，我想对它应用旋转变换，但不仅仅是鼠标拖动，而是在按下alt键的同时拖动鼠标。我试图实现一些东西，但事情似乎并不像我想的那样工作。以下是我实施的内容。如何在按下alt键的同时拖动鼠标来旋转SVG？

var width = 590, height = 400;


var svg = d3.select("#sketch4").append("svg")
    .attr("width", width)
    .attr("height", height)
    //.call(d3.zoom().on("zoom", zoomed))
    .call(d3.drag().on('drag', dragged))
    .append("g")

var rect = svg.append("rect")
    .attr("x", 100)
    .attr("y", 100)
    .attr("width", 60)
    .attr("height", 30)
    .attr("fill", "green")



  function dragged() {
                if (d3.event.sourceEvent.altKey){
                var me = sketchSVG.node()
                var x1 = me.getBBox().x + me.getBBox().width/2;
                var y1 = me.getBBox().y + me.getBBox().height/2;
                sketchSVG.attr("transform","rotate("+d3.event.y+","+x1+","+y1+")" );
                metricSVG.attr("transform","rotate("+d3.event.y+","+x1+","+y1+")" );
                }
            };

Answer 1

您需要使用d3.event.sourceEvent.x和d3.event.sourceEvent.y。更改它应该可以使您的代码正常工作。

要移动/缩放元素，请创建else条件，然后使用sketchSVG.attr("transform",d3.event.transform) zooming和translating元素。

＆＃13;

var width = 590,
  height = 400;


var svg = d3.select("#sketch4").append("svg")
  .attr("width", width)
  .attr('id', 'sketchSvg')
  .attr("height", height)
  .append("g")

d3.select('#sketchSvg')
  .call(d3.zoom().on("zoom", dragged))

var rect = svg.append("rect")
  .attr("x", 100)
  .attr("y", 100)
  .attr("width", 60)
  .attr("height", 30)
  .attr("fill", "green")



function dragged(d) {
  if (d3.event.sourceEvent.altKey && d3.event.sourceEvent.type == 'mousemove') {
    var me = svg.node()
    var x1 = me.getBBox().x + me.getBBox().width / 2;
    var y1 = me.getBBox().y + me.getBBox().height / 2;
    svg.attr("transform", "rotate(" + d3.event.sourceEvent.y + "," + x1 + "," + y1 + ")");
  }
};

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id='sketch4'></div>

＆＃13;

这是JSFiddle

上的一个

使用dyd.drag（）的keydown事件来旋转SVG

1 个答案: