javascript - 舍入 x 和 y 后，Svg 元素有时会卡住

Question

我创建了一个可拖动的矩形。并使 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 + ')')
  }

矩形确实像卡在 handle 上一样移动，问题是它有时会卡住。不确定是什么原因造成的。有什么可能的方法来解决这个问题？

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

Answer 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

希望这对您有所帮助!