Question

搞清楚snap.svg，就像标题所说的那样，我有一个通过Bootstrap的图像响应来调整大小的视图框，这在我尝试拖动之前效果很好，然后坐标变得偏斜。

Codepen：http://codepen.io/k3no/pen/mWPqwm

继承JS代码：

  var s = Snap("#snappy");
  var circle = s.circle(600, 350, 100);

  circle.attr({
      fill: "tomato",
      stroke: "cornflowerblue",
      strokeWidth: 20
  });
  circle.drag();

和HTML：

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
      <svg id='snappy' class='img-responsive' viewBox="0 0 1200 700"></svg>         
      </div>
    </div>

Answer 1

默认拖动不会将转换中的任何变换或更改从屏幕转换到视图框等。所以，我解决这个问题的一个方法就是编写一个插件来处理它。

基本上它的工作方式是将dx / dy变化考虑到适用于它的变换。

Example plugin in use

Snap.plugin( function( Snap, Element, Paper, global ) {

    Element.prototype.altDrag = function() {
        this.drag( dragMove, dragStart, dragEnd );
        return this;
    }

    var dragStart = function ( x,y,ev ) {
        this.data('ot', this.transform().local );
    }


    var dragMove = function(dx, dy, ev, x, y) {
        var tdx, tdy;
        var snapInvMatrix = this.transform().diffMatrix.invert();
        snapInvMatrix.e = snapInvMatrix.f = 0;
        tdx = snapInvMatrix.x( dx,dy ); tdy = snapInvMatrix.y( dx,dy );
        this.transform( "t" + [ tdx, tdy ] + this.data('ot')  );

    }

    var dragEnd = function() {
    }
});

我之前已经完成了一个稍微复杂的版本here，如果你最终得到嵌套变换这样的东西，但这可能对你的例子来说太过分了。

Snap.svg在响应式视图框中拖动坐标

1 个答案: