javascript - 如何在svg.js中固定 mask 的位置？

这是js代码：

var cv = Snap('#cv').attr({height: '100%', width: '100%'});

var mskHide = cv.rect().attr({height: '100%', width: '100%', left:0, top:0, fill: '#666'});
var mskShow = cv.circle(200, 200, 150).attr({fill: '#fff'});
var mskG = cv.group(mskHide, mskShow);

var bg = cv.circle(200, 200, 150).attr({fill: '#aaa'});
var customImg = cv.image('http://placehold.it/500/990000').attr({mask: mskG});

//when I drag the customImg， I want mskG fixed position
customImg.drag();

您可以在此处预览：http://codepen.io/rlog/pen/eKBlc

问题是：拖动customImg时，如何确定mskG的位置。

mskG无需移动costomImg

这个例子就是我想要的：http://codepen.io/rlog/pen/bAImu

谢谢！

最佳答案

您基本上可以执行第二个Codepen中的操作。

var cv = Snap('#cv').attr({height: '100%', width: '100%'});

var mskHide = cv.rect().attr({height: '100%', width: '100%', left:0, top:0, fill: '#666'});
var mskShow = cv.circle(200, 200, 150).attr({fill: '#fff'});
var mskG = cv.group(mskHide, mskShow);


var bg = cv.circle(200, 200, 150).attr({fill: '#aaa'});

var customImg = cv.image('http://placehold.it/500/990000').attr({mask: mskG });


customImg.drag( myDrag );
function myDrag(dx,dy,x,y) {
  customImg.attr({ x: dx, y: dy })
}

codepen

如果要与所示示例中的拖动不同，以包括存储的开始拖动位置，则可以对其进行如下修改：

customImg.attr({ x: 0, y: 0})

var move = function(dx,dy) {
this.attr({
      x: +this.data('ox') + +dx,
      y: +this.data('oy') + +dy
    })
}

var start = function(x,y) {
  this.data('ox', this.attr('x'));
  this.data('oy', this.attr('y'));
}

var end = function(x,y) {}

customImg.drag( move, start, end )

codepen

关于javascript - 如何在svg.js中固定 mask 的位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24256991/