Snap.svg在響應式視框中拖動座標

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如果你最終的東西像嵌套變換我以前做過，但它可能是矯枉過正爲您的網站的例子。