如何修复snapsvg.js中掩码的位置？ [英] how to fix the position of mask in snapsvg.js?

问题描述

这里是js代码：

  var cv = Snap（'＃cv'）。attr（{height：'100 ％'，宽度：'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时，我想mskG固定位置
 customImg.drag（）; 
  

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

问题在于：当我拖动 customImg 时，如何修复 mskG 的位置。

$ b $ < 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）; 
函数myDrag（dx，dy，x，y）{
 customImg.attr（{x：dx，y：dy}）
} 
  

codepen

p>

如果您想要显示的示例中包含不同的拖动以包含存储的开始拖动位置，请修改它，如下所示...

  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

Here is js code:

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();

You can preview here: http://codepen.io/rlog/pen/eKBlc

The question is: When I drag the customImg, how can I fix the position of mskG.

The mskG is no need move whit costomImg

this example is what I want: http://codepen.io/rlog/pen/bAImu

Thanks!

解决方案

You could basically do what you have in the 2nd 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

If you want a different drag from the example shown to include stored start drag location, you would amend it something like the following...

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

这篇关于如何修复snapsvg.js中掩码的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！