API

【代码分享】点击全屏预览图片(幻灯片形式),双指缩放图片效果

先预览一下看效果:

sss.png

 
https://e.u.mgd5.com/c/ams9/uni0/index.html
 
这是作品源文件:
 
https://www.mugeda.com/animation/edit/1c95fbc5
 
 
下边的是内容里需要添加的代码
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
window.checkuseragent = function(){
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
return false;
}else{
return true;
}
}

var picArr = ;
window.getimgurl = function(){
var max = 5; //这里的数字是需要按你自己图片的数量修改的
var j;
var picdom;
for (i = 0; i < max; i++) {
j = i+1;
picdom = scene.getObjectByName('pic'+j).dom;
picArr.push(picdom.src);
}
}

window.customview = function(){
if(checkuseragent()){
wx.previewImage({
current: picArr[0],
urls: picArr
});
}

}

});

需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量

2 个评论

图片旋转呢?
旋转图片的功能已经在 beta.mugeda.com 上线了,点中图片,在属性里设置自由拖动的地方可以设置双指放和旋转

要回复文章请先登录注册