axure 图片切换图片的交互_Creator | H5原生交互（图片长按保存/视频上层按钮）...

最新推荐文章于 2023-08-27 19:18:48 发布

世界再美我始终如一

最新推荐文章于 2023-08-27 19:18:48 发布

阅读量277

点赞数

文章标签： axure 图片切换图片的交互

本文链接：https://blog.csdn.net/weixin_26840895/article/details/112225567

版权

本文介绍了如何在H5游戏中实现图片切换及交互功能，包括通过canvas、SurfaceView和UIView在不同平台的表现。在H5中，通过获取特定div并添加元素实现图片长按保存，同时展示了在游戏canvas上添加按钮覆盖video播放的代码实现。

摘要由CSDN通过智能技术生成

首先来了解下游戏在各个平台中的最终表现形式

H5：canvas
Android：SurfaceView
IOS：UIView

在浏览器中，打开开发者工具，可以清楚地看到游戏所在的div

在调试模式下可以看到，canvas所在的div中id为Cocos2dGameContainer，所以首先要获取该div：

let divGame = document.getElementById("Cocos2dGameContainer");

然后根据需要，创建H5的element，添加到该div中：

divGame.appendChild(element);

如添加img后：

1图片(长按保存)

在gif中可以看到游戏的canvas中鼠标右键是无法弹出菜单的，但是添加的H5元素的img右键会弹出相应菜单，在手机上的表现就是长按出现保存图片等操作

代码：

@property({ type: cc.Texture2D })
asset: cc.Texture2D = null;

let img = document.createElement("img");
img.src = this.asset.nativeUrl; //图片路径
// img.src = dataURL; //截图数据
img.id = "capture";
img.alt = "capture";
// img.width = cc.winSize.width;
// img.height = cc.winSize.height;
img.width = 195;
img.height = 270;
img.style.position = "absolute";
img.style.top = 0;
img.style.left = 0;

let divGame = document.getElementById("Cocos2dGameContainer");
divGame.appendChild(img);

//删除
//divGame.removeChild(img);

2按钮(videoplayer/webbiew上层)

代码：

@property({ type: cc.Texture2D })
assetNormal: cc.Texture2D = null;

@property({ type: cc.Texture2D })
assetPress: cc.Texture2D = null;

let button = document.createElement("img");
button.src = this.assetNormal.nativeUrl;
button.id = "button";
//button的锚点为左上角
button.width = 88;
button.height = 135;
button.style.position = "absolute";
button.style.top = "30%";
button.style.left = "30%";
button.onclick = function () {
  button.src = this.assetNormal.nativeUrl;
  alert("onclick");
}.bind(this);
button.onmousedown = function () {
  button.src = this.assetPress.nativeUrl;
}.bind(this);

let divGame = document.getElementById("Cocos2dGameContainer");
divGame.appendChild(button);