Question

我目前正在使用Chart.js在项目中生成条形图。我已将其设置为通过ASP.NET web方法将数据返回到图表，并且我已将其设置为使用静态标签。

我通过在onComplete回调之后迭代数据集和数据，然后使用fillText命令写入画布来完成此操作。

现在，我遇到的问题是标签有时会与图表内容重叠或重叠。

我想要做的是检查画布在给定的点/区域是否已经有某些东西。 这可能吗？如果是这样，怎么办呢？

我是一名经验丰富的程序员，但我对JavaScript很陌生。我搜索了几个小时试图找到合适的解决方案，但找不到任何正常工作的东西。

如果需要，我可以提供示例代码和图像，但鉴于问题的范围，我不认为这是必需的。

当前项目资源：JavaScript，JQuery，Chart.js，bootstrap，ASP.NET webmethods

谢谢

Answer 1

好吧，我的要求发生了变化，我不再需要担心这个问题，但我会发布我用过的代码：

var imgData = context.getImageData(0,0,canvas.width,canvas.height);

// Function to find the hex color of a specific pixel in the imgData context.
function getPixel(imgData, index) {
    var i = index * 4, d = imgData.data;
    return rgbToHex(d[i], d[i + 1], d[i + 2]) 
    // returns hex string of rgb values.
}

// Function to caluclate offset of imgData context and then return hex color from getPixel function call.
function getPixelFromCoordinate(imgData, x, y) {
    return getPixel(imgData, y * imgData.width + x);
}

// Function to convert a given rgb value to a hex string.

function rgbToHex(r, g, b) {
    // Left shift values to allow for cheap hex construction
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

此代码工作正常，希望它对其他人有用。

参考文献1：getPixel from HTML Canvas?

参考文献2：How to use JavaScript or jQuery to read a pixel of an image when user clicks it?

如何使用javascript检查HTML5 canvas元素是否在给定的坐标区域中包含某些内容

1 个答案: