这是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
谢谢!
答案 0 :(得分:1)
你基本上可以在第二个代码中完成你的工作。
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 })
}
如果您希望从显示的示例中添加不同的拖动以包含存储的起始拖动位置,您可以修改它,如下所示......
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 )