javascript - Snap.svg 在响应式 View 框中拖动坐标

Question

弄清楚 snap.svg，就像标题所说，我有一个 View 框，正在通过 Bootstrap 的图像响应功能调整大小，效果很好，直到我尝试拖动，然后坐标就会倾斜。

代码笔: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

默认拖动不会考虑任何变换或从屏幕到 View 框等的变换变化。所以我解决这个问题的一种方法是编写一个插件来处理这个问题。

基本上，它的工作原理是采用 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我之前已经做过，如果您最终得到嵌套转换之类的东西，但这对于您在这里的示例来说可能有点过分了。