我正在尝试在其上实现一个带有某个多边形的按钮,按下该按钮会将多边形更改为其他内容。例如,按钮上的播放图标更改为停止图标。理想情况下,图标应该是一个多边形,其中三个点描绘了游戏符号。在动画之后,它变成一个四点(一个正方形)的多边形,描绘了停止符号。
我试过这样做:
var paper = Snap('svg');
var tpts = [100,100,100,130,120,115];
var sqpts = [100,100,100,130,130,130,130,100];
var tri = paper.polygon(sqpts);
tri.attr({
id:"tri",
fill:"#555555"
});
sqrFunc = function(){
tri.animate({"points":sqpts},1000,mina.linear);
}
triFunc = function(){
tri.animate({"points":tpts},1000,mina.linear);
}
点击按钮后,我调用sqrFunc并再次单击它,我调用triFunc。我尝试将不同的点数组分配给“点”,因为当我查询tri.attr(“points”)时,我将指定的点作为返回值。但是,尝试分配这样的数组会导致错误。非常感谢任何有关此问题的帮助。
答案 0 :(得分:7)
我的代码没有任何错误,但转换不会发生,因为三角形只有3个点。
我用
修复了它 var tpts = [100,100,100,100,100,130,120,115];
试试这个
var paper = Snap('svg');
var tpts = [100,100,100,100,100,130,120,115];
var sqpts = [100,100,100,130,130,130,130,100];
var tri = paper.polygon(tpts);
tri.attr({
id:"tri",
fill:"#555555"
});
sqrFunc = function(){
tri.animate({"points":sqpts},1000,mina.linear);
}
triFunc = function(){
tri.animate({"points":tpts},1000,mina.linear);
}
setTimeout(sqrFunc, 200);
setTimeout(triFunc, 1200);
另一种方法是使用路径
var paper = Snap('svg');
var tri = paper.path("M 10 10, L 10 50, L 50 25, Z");
tri.attr({
id:"tri",
fill:"#555555"
});
sqrFunc = function(){
tri.animate({d:"M 10 10, L 10 50, L 50 50, L50 10,Z"},1000,mina.linear);
}
triFunc = function(){
tri.animate({d:"M 10 10, L 10 50, L 50 25, Z"},1000,mina.linear);
}
setTimeout(sqrFunc, 200);
setTimeout(triFunc, 1200);