查看: 8456|回复: 8

关于画布绝对定位在手机浏览器无法点击的问题

1 主题	0 好友	19 积分

士兵

Rank: 1

发消息

电梯直达

楼主

发表于 2014-10-10 11:26:25 |只看该作者 |倒序浏览

<body>
<div id="maskWrap">loading......</div>
</body>
init(50, "maskWrap", 335, 300, this.main);
HTML如上，默认画布都是在页面的左上 0 0 位置。
但是我希望画布能去到
#maskWrap｛
position:absolute;
top:100px;
left50px;
｝
这样的问题，我设置了如上的CSS，发现，我在画布上加的点击事件，在手机浏览器（威信）中，无法点击，想请问下具体是什么原因导致的。

难道画布只能定位在左上角？

分享0 收藏0

使用道具举报

lufy

37 主题	8 好友	9313 积分

诸侯王

Rank: 15

发消息

沙发

发表于 2014-10-10 15:00:46 |只看该作者

我需要知道你是如何定位的？

不回答与技术和引擎不相关的问题

使用道具举报

406087475

1 主题	0 好友	19 积分

士兵

Rank: 1

发消息

板凳

发表于 2014-10-10 17:02:45 |只看该作者

就是直接 CSS 里定位的啊
因为在HTML里来说，画布也是在<div id="maskWrap">loading......</div>这个容器内的啊
按道理，我直接CSS（如下）
#maskWrap｛
position: absolute;
top: 100px;
left: 50px;
｝
容器就会去到页面中的这个地方

其实我就是做了一个刮刮卡的效果
然后问题就来了，在PC端都是可以的，但是在手机端，刮除效果就出不来了，也就是绑定的鼠标按下、移动事件没有触发。

我刚也测试了下
LGlobal.canvasObj.style.position = "absolute";
LGlobal.canvasObj.stye.top = "140px";
LGlobal.canvasObj.stye.left = "113px";

在手机端确实没触发事件。。。

难道画布必须在 0 0 位置？

使用道具举报

lufy

37 主题	8 好友	9313 积分

诸侯王

Rank: 15

发消息

地板

发表于 2014-10-10 22:44:05 |只看该作者

406087475 发表于 2014-10-10 17:02
就是直接 CSS 里定位的啊
因为在HTML里来说，画布也是在loading......这个容器内的啊
按道理，我直接CSS（ ...

确实有问题，以后我会修正这个问题
目前的话，你可以试一下这样设置

LGlobal.canvasObj.style.marginTop = "50px";
LGlobal.canvasObj.style.marginLeft = "100px";

复制代码

例子
http://lufylegend.com/demo/test/57.html

不回答与技术和引擎不相关的问题

使用道具举报

406087475

1 主题	0 好友	19 积分

士兵

Rank: 1

发消息

5^#

发表于 2014-10-11 09:43:44 |只看该作者

非常感谢你的回答！
我测试了下，用上面的代码直接设置margin-top 和 margin-left还是有问题的，你的例子里，其实坐标点也已经偏移的了。

希望下次发布的版本能改善这个问题，非常感谢！

使用道具举报

lufy

37 主题	8 好友	9313 积分

诸侯王

Rank: 15

发消息

6^#

发表于 2014-10-11 09:56:11 |只看该作者

406087475 发表于 2014-10-11 09:43
非常感谢你的回答！
我测试了下，用上面的代码直接设置margin-top 和 margin-left还是有问题的，你的例子里 ...

上面的例子我用安卓手机测试，坐标并没有问题啊
你的测试环境是？

不回答与技术和引擎不相关的问题

使用道具举报

406087475

1 主题	0 好友	19 积分

士兵

Rank: 1

发消息

7^#

发表于 2014-10-11 12:47:02 |只看该作者

不可能啊，就算是直接在浏览器中，也是有问题的啊

火狐浏览器，你图片涂抹的时候，左上是没有反应的啊

手机上也是啊（红米手机自带的浏览器）

使用道具举报

406087475

1 主题	0 好友	19 积分

士兵

Rank: 1

发消息

8^#

发表于 2014-10-11 12:53:36 |只看该作者

不好意思，我刚测试了下，发现电脑的火狐浏览器不行
谷歌是可以的
再用手机测试了下，可以的
实在不好意思，测试不够仔细

使用道具举报

lufy

37 主题	8 好友	9313 积分

诸侯王

Rank: 15

发消息

9^#

发表于 2014-10-11 14:32:33 |只看该作者

406087475 发表于 2014-10-11 12:53
不好意思，我刚测试了下，发现电脑的火狐浏览器不行
谷歌是可以的
再用手机测试了下，可以的

忘了火狐这个奇葩的存在了，
为了让火狐也好用，在手动修改LGlobal.canvasObj.style的属性的时候，要重新设定一下LGlobal.left和LGlobal.top的值
在上面的设置完之后，加上下面的代码就好了

if (LGlobal.isFirefox) {
LGlobal.left = parseInt(LGlobal.canvasObj.style.marginLeft);
LGlobal.top = parseInt(LGlobal.canvasObj.style.marginTop);
}

复制代码

我的demo也改了，你可以再试一下

不回答与技术和引擎不相关的问题

使用道具举报

返回列表

		自动登录	找回密码
密码			立即注册