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

Question

弄清楚 snap.svg，正如标题所说，我有一个正在通过 Bootstrap 的 image-responsive 调整大小的视图框，在我尝试拖动之前效果很好, 然后坐标就变得倾斜了。

这是 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 在响应式视图框中拖动坐标

Snap.svg Drag coordinates inside a responsive viewbox

javascript

twitter-bootstrap

svg

snap.svg