lufy's legend

标题: 两个重叠在一起的canvas，如何同步缩放。 [打印本页]

作者: toneycc 时间: 2016-6-6 08:49
标题: 两个重叠在一起的canvas，如何同步缩放。
因为特殊的需要，需要在引擎自动添加的canvas下方再放置一个canvas，尺寸位置和引擎添加的canvas完全一致，问题是在手机上显示时引擎的canvas可以自动适应，下面的canvas如何才能够和引擎的canvas同步变化呢？

作者: lufy 时间: 2016-6-6 09:06
能说说为什么要这么做吗？
或许有其它更好的方法解决
因为这样做但从显示上来讲，效率就得降到原来的一半以下
而且还要加上其它影响

当然，一定非要这么做的话
canvas的style属性一致的话大小也就一致了

作者: toneycc 时间: 2016-6-6 09:47
是因为要播放视频需要，在iphone的浏览器中直接使用video的话会自动全屏播放，我应用必须要求在浏览器内播放，所以要增加一个canvas来显示视频而不是直接使用video。style属性是一致的，我是想在手机上横竖转换的时候能跟随一起变化缩放。

作者: toneycc 时间: 2016-6-6 09:51
https://stanko.github.io/html-canvas-video-player/ 这个是视频播放的演示页面，我是用的这个原理来做。把视频的canvas放在下面，游戏的canvas放在上面。

作者: lufy 时间: 2016-6-6 12:06

toneycc 发表于 2016-6-6 09:51
https://stanko.github.io/html-canvas-video-player/ 这个是视频播放的演示页面，我是用的这个原理来做。 ...

你这样做，估计是不考虑安卓了吧，安卓是不支持这个功能的
如果不考虑安卓的话，你可以看一下LVideo能不能满足你的要求
http://lufylegend.com/api/zh_CN/out/classes/LVideo.html
不需要两个canvas的开销

作者: toneycc 时间: 2016-6-6 12:14
本帖最后由 toneycc 于 2016-6-6 12:15 编辑

Lvideo 在safari中播放视频会自动全屏，不能用. 能不能具体介绍一下怎么能同步两个canvas的缩放？

作者: lufy 时间: 2016-6-6 12:17

toneycc 发表于 2016-6-6 12:14
Lvideo 在safari中播放视频会自动全屏，不能用. 能不能具体介绍一下怎么能同步两个canvas的缩放？ ...

自动全屏？你确定测试了吗？
LVideo就是利用canvas显示Video标签

作者: toneycc 时间: 2016-6-6 12:55
肯定试过了你API里面的那个测试链接，在iphone 中用safari 打开只要播放视频就会变成全屏的。

作者: lufy 时间: 2016-6-6 13:42

toneycc 发表于 2016-6-6 12:55
肯定试过了你API里面的那个测试链接，在iphone 中用safari 打开只要播放视频就会变成全屏的。 ...

你现在的做法不会全屏吗，我看了看LVideo中使用的方法和你给的链接中的做法是一样的啊
缩放就是我前面说的canvas.style.width 和canvas.style.height的值相同的话，大小就一样了

作者: toneycc 时间: 2016-6-6 13:47
不一样，这个video是被隐藏了，用它解码出来去填充canvas 实际视频是canvas 显示的，这个就不会全屏显示 .

作者: lufy 时间: 2016-6-6 14:02

toneycc 发表于 2016-6-6 13:47
不一样，这个video是被隐藏了，用它解码出来去填充canvas 实际视频是canvas 显示的，这个就不会全屏显示 ...

LVideo中也是用隐藏video标签，然后用canvas来显示的，以前我记得是好用的，可能兼容性做的不好或者苹果做了更新，主要是这个东西太少有人用到了
那你先按照他的做法，自己做一下适配吧
等我有时间研究一下它的代码，看看区别在哪里吧
下次引擎更新再调整一下LVideo，多谢了

作者: toneycc 时间: 2016-6-6 14:32
能不能给个示例，我怎么能同步两个canvas的缩放

作者: lufy 时间: 2016-6-6 16:14

toneycc 发表于 2016-6-6 14:32
能不能给个示例，我怎么能同步两个canvas的缩放

没有示例
做法我上面已经说了就是style属性设置成一样就行
引擎控制的canvas全屏适配之后，你把你要适配的canvas的style属性设置一下就行了

作者: toneycc 时间: 2016-6-7 01:53
非常感谢

欢迎光临 lufy's legend (http://lufylegend.com/forum/)