Question

我是snap.svg的新手，我已经能够制作我的圆圈并使其可拖动但我可以将它拖出我给svg的区域，然后它在页面上丢失。我如何绑定它以便它不能超出我为svg提供的区域？

这是我的基本代码：

<body>
<svg id="svg" style="width:700px; height:600px;"></svg>
</body>
<script>
var s = Snap('#svg')
var circle = s.circle(150, 150, 100)
circle.drag();
</script>

感谢您的帮助！

Answer 1

万一有人偶然发现了这个，我有一段时间玩了一些可能有帮助的东西......它有点矫枉过正，但是如果你不需要为这样的事情烦恼就可以进一步简化svg上的viewBox。所以我认为如果它有所帮助，我会把它包括在内。

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

    Element.prototype.limitDrag = function( params ) {
        this.data('minx', params.minx ); this.data('miny', params.miny );
        this.data('maxx', params.maxx ); this.data('maxy', params.maxy );
        this.data('x', params.x );    this.data('y', params.y );
        this.data('ibb', this.getBBox() );
        this.data('ot', this.transform().local );
        this.drag( limitMoveDrag, limitStartDrag );
        return this;    
    };

    function limitMoveDrag( dx, dy ) {
        var tdx, tdy;
        var sInvMatrix = this.transform().globalMatrix.invert();
            sInvMatrix.e = sInvMatrix.f = 0; 
            tdx = sInvMatrix.x( dx,dy ); tdy = sInvMatrix.y( dx,dy );

        this.data('x', +this.data('ox') + tdx);
        this.data('y', +this.data('oy') + tdy);
        if( this.data('x') > this.data('maxx') - this.data('ibb').width  ) 
            { this.data('x', this.data('maxx') - this.data('ibb').width  ) };
        if( this.data('y') > this.data('maxy') - this.data('ibb').height ) 
            { this.data('y', this.data('maxy') - this.data('ibb').height ) };
        if( this.data('x') < this.data('minx') ) { this.data('x', this.data('minx')     ) };
        if( this.data('y') < this.data('miny') ) { this.data('y', this.data('miny') ) };
        this.transform( this.data('ot') + "t" + [ this.data('x'), this.data('y') ]  );
    };

    function limitStartDrag( x, y, ev ) {
        this.data('ox', this.data('x')); this.data('oy', this.data('y'));
    };
  })

// example use
var myCircle2 = s.circle(20,20,20)
             .attr({ fill: 'blue' })
             .limitDrag({ x: 0, y: 0, minx: 0, miny: 0, maxx: 100, maxy: 100 });

Test example

将snap.svg元素绑定到svg区域

1 个答案: