javascript - 舍入x和y后，svg元素会不时卡住

我创建了一个可拖动的矩形。并使其x和y仅为10的乘数（实现对齐网格效果）：

  var x = 0
  var y = 0

  var width = 400
  var height = 400
  var drag = d3.behavior.drag()
    .on('drag', dragmove)


  var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)

  svg.append('rect')
    .attr('class', 'bg')
    .attr('width', width)
    .attr('height', height)

  svg.append('rect')
    .attr('class', 'btn')
    .attr('width', 200)
    .attr('height', 50)
    .attr('transform', 'translate(' + x + ',' + y + ')')
    .call(drag)

  function dragmove () {
    var rectX = d3.transform(d3.select(this).attr('transform')).translate[0]
    var rectY = d3.transform(d3.select(this).attr('transform')).translate[1]
    var mouseX = rectX + d3.event.dx
    var mouseY = rectY + d3.event.dy
    var snappedX = Math.round(mouseX / 10) * 10
    var snappedY = Math.round(mouseY / 10) * 10

    console.log(snappedX)
    console.log(snappedY)

    d3.select(this)
      .attr('transform', 'translate(' + snappedX + ',' + snappedY + ')')
  }

矩形确实会像被紧握一样移动，问题在于它会不时卡住。不知道是什么原因造成的。解决此问题的可能方法是什么？

https://jsfiddle.net/alexcheninfo/qrhngr9v/1/

最佳答案

我确实是这样的：

创建一个全局变量来存储漂移：

    var dx = 0;
    var dy = 0;

在拖动移动中增加拖动
                dx = dx + d3.event.dx;
                dy = dy + d3.event.dy;

然后与snaprange [10，-10]比较

if (dx > 10 || dx < -10){

在达到阈值时给出翻译。

if (dx > 10 || dx < -10){
                   var snappedX = rectX + dx;

                     dx = 0;
                     d3.select(this)
                        .attr('transform', 'translate(' + snappedX + ',' + rectY + ')')
                }

y也一样

var rectX = d3.transform(d3.select(this).attr('transform')).translate[0]
        var rectY = d3.transform(d3.select(this).attr('transform')).translate[1]
        if (dy > 10 || dy < -10){
                   var snappedY = rectY + dy;
                     dy = 0;
                     d3.select(this)
                        .attr('transform', 'translate(' + rectX + ',' + snappedY + ')')
                }

工作代码here

希望这可以帮助！

关于javascript - 舍入x和y后，svg元素会不时卡住，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35306915/