Webkit Mousemove画布RGBA失败 [英] Webkit Mousemove Canvas RGBA FAIL

问题描述

我有一个非常漂亮的饼/甜甜圈图与chartjs.org绘制。工程伟大。易于实施。动画很好。我还有一个标签，当用户悬停在图表上时需要更新。 Mousemove触发并按照FF和IE10 / 9中的预期协调返回rgba。但不是Webkit。它似乎得到所有混合...意外的行为来自Chrome / Safari。有任何想法如何解决这个问题？

这是问题存在的地方：

  var canvasOffset = $（this）.offset（）; 
 var canvasX = Math.floor（e.pageX  -  canvasOffset.left） 
 var canvasY = Math.floor（e.pageY- canvasOffset.top）; 
 var imageData = ctx.getImageData（canvasX，canvasY，1，1）; 
 var pixel = imageData.data; 
 var pixelColor =rgba（+ pixel [0] +，+ pixel [1] +，+ pixel [2] +，+ pixel [3] +） 
 
 console.log（pixel [0]）; 
  

http://jsfiddle.net/michaeladamek/H57Pp/

解决方案

尝试更换三行have：

  var canvasOffset = $（this）.offset 
 var canvasX = Math.floor（e.pageX  -  canvasOffset.left）; 
 var canvasY = Math.floor（e.pageY  -  canvasOffset.top）; 
  

这些：

  var canvasOffset = $（this）[0] .getBoundingClientRect（）; 
 var canvasX = Math.floor（e.clientX  -  canvasOffset.left）; 
 var canvasY = Math.floor（e.clientY  -  canvasOffset.top）; 
   
 
 
   Modified fiddle   
 
I have a very nice pie/donut chart drawn with chartjs.org. Works great. Easy to implement. Animates nicely. I also have a label that needs to update when the user hovers over the chart. Mousemove fires and returns the rgba coordinately as expected in FF and IE10/9. But not Webkit. It seems to get all mixed up... Unexpected behavior coming from Chrome/Safari. Any idea how to fix this?

This is the where the problem exist:
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;    
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";

console.log(pixel[0]);
http://jsfiddle.net/michaeladamek/H57Pp/
解决方案
Try replacing the three lines you have:
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
with these:
var canvasOffset = $(this)[0].getBoundingClientRect();
var canvasX = Math.floor(e.clientX - canvasOffset.left);
var canvasY = Math.floor(e.clientY - canvasOffset.top);
Modified fiddle

                        
这篇关于Webkit Mousemove画布RGBA失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！