个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
26
4
当我使用下面的 Javascript 代码时
function init() {
var gameCanvas = document.getElementById("gameCanvas");
document.getElementById("canvasWidth").innerHTML = gameCanvas.width;
gameCanvas.addEventListener("mousemove", handleMouseEvent);
}
function handleMouseEvent(mouseEvent) {
document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;
}
用这个 html
<body>
<div id="mainScreen">
<div id="topScreen">
<h1 id="canvasWidth">Score:</h1>
<h1 id="mouseX">0</h1>
</div>
<div id="gameScreen">
<canvas id="gameCanvas" onclick="init()">
</canvas>
</div>
</div>
</body>
Canvas 宽度显示为 300，而留在 Canvas 中的 mouseX 远远超过 300。我已经链接了它的屏幕截图。它在 Chrome 中工作正常，但它不在 Internet Explorer 和 Windows 商店应用程序中工作。
截图:http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae
指针位于右边缘附近的某处，但它没有出现在屏幕截图中，这就是我标记它的原因。顶部第一个数字是 Canvas 宽度，第二个数字显示指针 offsetX。
为什么会出现这种情况，如何纠正？
更新(添加CSS代码)
CSS 代码
#mainScreen {
display: -ms-grid;
-ms-grid-columns: 30px 1fr 30px;
-ms-grid-rows: 30px 100px 20px 1fr 30px;
height:inherit;
}
#topScreen {
display: -ms-grid;
-ms-grid-column: 2;
-ms-grid-row: 2;
-ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px;
-ms-grid-rows: 20px 1fr 20px;
}
#canvasWidth {
display: -ms-grid;
-ms-grid-row: 2;
-ms-grid-column: 2;
}
#mouseX {
display: -ms-grid;
-ms-grid-column: 4;
-ms-grid-row: 2;
}
#gameScreen {
display: -ms-grid;
-ms-grid-column: 2;
-ms-grid-row: 4;
-ms-grid-rows:1fr;
-ms-grid-columns: 1fr;
height:inherit;
width:inherit;
}
#gameCanvas {
height:inherit;
width:inherit;
background-color:white;
-ms-grid-column: 1;
-ms-grid-row: 1;
}
最佳答案
查看两者之间的区别偏移X,X层，第X页，客户X，screenX 属性这可能有用 MouseEventsProperties ....不同的浏览器支持不同的属性了解它们之后，您将了解如何使用这些属性，以便您的应用程序适用于所有平台
好的，这是我在 chrome、safari、firefox 甚至 iPad 等触摸设备上编写和测试的代码(非常简化的版本)。该代码将事件对象作为参数，它将返回具有相对于 Canvas 的 X 和 Y 的坐标对象。希望这会有所帮助...
containerX = document.getElementById('container').offsetLeft;
containerY = document.getElementById('container').offsetTop;
//here container is the id of my canvas basically the above two lines are global
// in my code
function getX_Y(evt){
var coord={
X: null,
Y: null
}
var isTouchSupported = 'ontouchstart' in window;
if(isTouchSupported){ // for touch devices
coord.X = evt.clientX-containerX;
coord.Y = evt.clientY-containerY;
return coord;
}
else if(evt.offsetX || evt.offsetX == 0){ //for webkit browser like safari and chrome
coord.X = evt.offsetX;
coord.Y = evt.offsetY;
return coord;
}
else if(evt.layerX || evt.layerX == 0){ // for mozilla firefox
coord.X = evt.layerX;
coord.Y = evt.layerY;
return coord;
}
}
关于javascript - 我得到的 mouseEvent.offsetX 比实际 Canvas 大小大得多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17106665/
26
4
0
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
我想对包含其部分内容的文本字段执行简单搜索，但我不知道从哪里开始。我基本上想要人们对“包含搜索”的期望。如果我在 issue 中搜索 345 ，我会想要这个结果: 123456 234567 3456
我在 VBE 的 C# 插件中有这段代码(强调“VBE”:它不是 MS-Office 插件): public abstract class HostApplicationBase : IHostApp
我有一个 ImageView，它显示来自资源的图像。ImageView 的宽度是固定的 (60dp)。高度设置为 wrap_content。调整图像大小以适合此宽度(节省宽高比 - 这很完美) 问题是
我正在建立一个网站，但遇到了一个问题:谷歌浏览器开发者工具中的背景以较低/较高的分辨率延伸。当我直接从手机打开网站时，背景不适合屏幕，只是“剪切”了背景。 这是网站:https://feargames
好吧，首先，这是 HTML 模板: ... ... ... ... 如您所见，页面位于标题下方，并且通过 JS 代码可见
我读到了 BK-trees (Burkhard-Keller-Trees) 几个月前，据说这是一种保存您想通过距离度量再次读取的内容的好方法。因此，在每种情况下，您都希望通过相似性检索某些内容。 然而
在 python 中，很容易根据字符数用空格填充字符串。例如: print "aaa".ljust(10) + "end" print "www".ljust(10) + "end" 输出是: aaa
我的问题不是特定于编程语言的，而是更通用的问题，以了解人们的思维方式。 通常在大型开发公司中，每项工作都有特定的角色，例如程序员和架构师。因此架构师的观点是拥有完美的架构师和解决方案设计，另一方面程序
我想将数据传递给 then 方法，但是当我通过给它 this.passedResolve 来执行此操作时，它会得到 undefined function Promises(callback){
我希望使用 Erlang/Elixir 在金融市场创建一个平台即服务。我将在金融市场提供 AWS lambda 风格的函数，但我计划向客户分发我自己的基于 ARM 的硬件终端(基于 Nvidia Je
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
我已经看到很多代码，这些代码使用Runnable的循环时间来实现某些计时器/超时。问题是，如果有人决定更改此Runnable的循环时间，则计时器将不正确。 例: #define FOO_TIMER_1
当我将 WPF DataGrid 的 ColumnHeaderHeight 设置为 Auto (double.NaN) 时，如何获取列标题的实际呈现高度？ 我似乎无法在 DataGrid 类中找到该属
目前最实用的png修复方法是什么？轻量级，支持背景重复和背景位置。 最佳答案 IE7.JS在我看来: IE7.js is a JavaScript library to make Microsoft
我已经进行了长时间的搜索并尝试了常见的嫌疑人，但现在是寻求帮助的时候了。 我的 Android Activity 非常愉快地从 SQLite 加载 EditText、Spinner 和 CheckBo
因此，我在 MySQL 全文中创建精确搜索时遇到了一些困难。 在我的数据库中，我正在尝试查找标题中包含特定关键字的职位。 所以我可以尝试 WHERE MATCH(jobTitle) AGAINST (
我正在尝试将 JavaScript 包含到一个表单应用程序中，该应用程序从现场收集施工数据。我已经用谷歌搜索了这个废话，但我无法弄清楚将 html 元素保存在数组中是否合法(或者我的语法是否正确)。
我知道有六种方法可以获取 session.save_path 指令的值(phpinfo()、session_save_path()等)，但当值为空字符串时(默认情况下为空字符串)，实际路径可以是多个位
我知道 npm 库在安装时可以在分层树中安装同一库的多个版本，如下所示: a@0.1.0 -> b@1.0 -> c@2.0 -> b@2.0 在上面，版本0.1.0的包a被拉入
我是一名优秀的程序员,十分优秀！