问题描述
我有一个非常漂亮的饼/甜甜圈图与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]);
尝试更换三行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();
$ c $ p>
var canvasX = Math.floor(e.clientX - canvasOffset.left);
var canvasY = Math.floor(e.clientY - canvasOffset.top);
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);
这篇关于Webkit Mousemove画布RGBA失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!