我使用画布、HTML5标签和JavaScript创建了一个简单的web应用程序,它允许在按下鼠标时沿直线绘制。当我不使用任何CSS格式时,这可以很好地工作。但是,当我使用CSS格式时,这不能正常工作:线条被绘制到远离鼠标所在的位置。
context = document.getElementById('drawing').getContext("2d");
//below code to ensure compatibility with older browser by check if addEventListener is available or not
我使用CSS变换比例在div上创建一个平滑的缩放。问题是,即使在放大的情况下,我也希望能够获得相对于div的正确鼠标位置,但我似乎可以找到正确的算法来获得这些数据。我正在从以下位置检索当前的比例因子:
var transform = new WebKitCSSMatrix(window.getComputedStyle($("#zoom_div")[0]).webkitTransform);
scale = transform.a;
当我在不同的比例设置下读取div的位置时,它似乎报告了正确的位置,例如,当我缩放div直到屏幕变大时,左侧和顶部的位置为负值,看起来是正确的,就像
我的画布有一个滚动功能,它可以检测鼠标移动的距离,并抵消画布中的所有图像。
问题是我几乎不动鼠标,偏移数呈指数增长,我不知道为什么.这是我处理偏移量计算的函数:
canvas.addEventListener('mousedown', scrol_cnv, false);
function scroll_cnv(e) {
if (e.button == 2) {//right click only
var x = e.pageX; // get click X
var y = e.pageY; //get click Y
我试图准确记录鼠标在网页上的移动位置(移动到像素)。我有以下代码,但结果数据中存在差距。
var mouse = new Array();
$("html").mousemove(function(e){
mouse.push(e.pageX + "," + e.pageY);
});
但是,当我查看记录的数据时,这是我所看到的一个例子。
76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels
这最好看起来更像:
76
下面的代码绘制正确,但绘制到错误的坐标。它应该画出鼠标所在的地方。我没能发现我的错误。谢谢。
container.mousedown(function(e) {
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
context_temp.beginPath();
context_temp.moveTo(x, y);
started = true;
});
contain
我已经尝试在我的画布中画一个图像,然后尝试用鼠标点击图像内部。但是X和Y的位置是不正确的,我考虑并纠正了偏移,但它们仍然是不正确的。
我现在不知道怎么解决这个问题。我做了一个小提琴来复制这种情况,包括画布所在的父div。
我以前考虑的代码似乎不起作用:
function getxy(event,el){
canvasX = event.pageX - el.offsetLeft,
canvasY = event.pageY - el.offsetTop;
return {x:canvasX, y:canvasY}
//does not give the same a
我的javascript (逻辑错误)出现了一个奇怪的故障,我不确定是我的数学问题还是我构建代码的方式。
我的想法是左键拖动,在画布上滚动一张地图。它的工作原理非常完美,除非当我鼠标向下滚动第二次时,地图会重置回它的x0y0偏移量。
所以从本质上说,我不能一直滚动,因为一旦我放开鼠标和鼠标,它又回到了起点。
所以我就是这样做的:
//this is in the init function called on body load
canvas.addEventListener("mousedown", mousePos, false);
//relevant function
我试图从一个鼠标侦听器中获取鼠标坐标,但它们是未定义的。鼠标侦听器将被添加到画布中,监听器将触发onMouseMove函数,但是传递的事件似乎没有为鼠标位置定义任何x或y坐标。
我尝试了以下变量: event.pageX、event.pageY、event.clientX、event.clientY、event.y .x、event.y.y
对于我做错了什么会导致鼠标坐标出现不确定有什么想法吗?谢谢你的帮助!
<script>
var boxes;
var canvas;
var context;
$(document).ready(function() {
canva
我想要能够得到的位置点击在一个图像。我想获取图像本身的坐标,而不是页面容器中的坐标。
我到得最近的地方是:
<template>
<div class="image-annotation">
<div style="position: relative">
<!-- image-annotation__marker class has styles to center place the pointer in a absolute positioning -->
<div
我试图找出'd3.event.pageX‘和’d3.鼠标(This)‘之间的区别。我猜想这两者是相同的,但是当我同时使用console.log时,代码中的值与'8‘是不同的。
var height=600;
var width=600;
var graphgap=60;
d3.csv('./details.csv').then(function(data){
var svg =d3.select('section').append('svg')
.attr('width',600).att
我在监听touchevents,当我用pageX/layerY调整layerX/layerY值时,从我的触摸(我的手指)看,这个点显示在圆圈的顶端,而不是中间。
//pageX = 310, layerX = -9. This is exactly in the middle of the touch circle horizontally
touchEvent.changedTouches[0].pageX + touchEvent.layerX
//pageY = 90, layerY = -34. This is exactly at the top of the touch circ