有没有办法在图表区添加图片[我用的是chart JS气泡图],目前我是通过css在画布上添加图片的。
wfveoks01#
"最好的方法是在画布上画出来"实现这一点的最好方法是直接在画布上绘制它,因为您可以直接访问和控制像素,所以您可以确保它是完美对齐的像素。在灯具上扩展答案,但使其仅在图表区域内绘制:第一个
没有在画布上绘图的替代方法
如果你真的不想在画布上绘制它,而是使用一个普通的img元素,你可以使用一个绝对位置,并使用一个自定义插件来正确地定位它,缺点是画布像素似乎与CSS不同,所以它们不能1:1使用,必须近似,这可能会导致轻微的对齐问题:第一个
uqxowvwt2#
Plugin Core API提供了一系列钩子,可以用来执行自定义代码。例如,你可以使用beforeDraw通过CanvasRenderingContext2D.drawImage()绘制图像。但这实际上是直接在画布上绘制图像。
beforeDraw
CanvasRenderingContext2D.drawImage()
plugins: [{ beforeDraw: chart => { var ctx = chart.chart.ctx; ctx.save(); var image = new Image(); image.src = 'https://i.stack.imgur.com/S7tJH.png'; imageSize = 250; ctx.drawImage(image, chart.chart.width / 2 - imageSize / 2, chart.chart.height / 2 - imageSize / 2, imageSize, imageSize); ctx.restore(); } }],
请看下面的可运行代码片段。第一次
2条答案
按热度按时间wfveoks01#
"最好的方法是在画布上画出来"
实现这一点的最好方法是直接在画布上绘制它,因为您可以直接访问和控制像素,所以您可以确保它是完美对齐的像素。
在灯具上扩展答案,但使其仅在图表区域内绘制:
第一个
没有在画布上绘图的替代方法
如果你真的不想在画布上绘制它,而是使用一个普通的img元素,你可以使用一个绝对位置,并使用一个自定义插件来正确地定位它,缺点是画布像素似乎与CSS不同,所以它们不能1:1使用,必须近似,这可能会导致轻微的对齐问题:
第一个
uqxowvwt2#
Plugin Core API提供了一系列钩子,可以用来执行自定义代码。例如,你可以使用
beforeDraw
通过CanvasRenderingContext2D.drawImage()
绘制图像。但这实际上是直接在画布上绘制图像。请看下面的可运行代码片段。
第一次