⼩程序中canvas绘制图表层级问题
引⾃官⽅⽂档
  在⼩程序中存在⼀类特殊的组件，该类组件是由客户端创建的原⽣组件。这些组件有：
camera
canvas
input（仅在focus时表现为原⽣组件）
live-player
live-pusher
map
textarea
video
由于原⽣组件脱离在 WebView 渲染流程外，因此在使⽤时有以下限制：
原⽣组件的层级是最⾼的，所以页⾯中的其他组件⽆论设置z-index为多少，都⽆法盖在原⽣组件上。
后插⼊的原⽣组件可以覆盖之前的原⽣组件。
原⽣组件还⽆法在 picker-view 中使⽤。
基础库 2.4.4 以下版本，原⽣组件不⽀持在 scroll-view、swiper、movable-view 中使⽤。
部分CSS样式⽆法应⽤于原⽣组件，例如：
⽆法对原⽣组件设置 CSS 动画
⽆法定义原⽣组件为position: fixed
不能在⽗级节点使⽤overflow: hidden来裁剪原⽣组件的显⽰区域
原⽣组件的事件监听不能使⽤bind:eventname的写法，只⽀持bindeventname。原⽣组件也不⽀持 catch 和 capture 的事件绑定⽅式。
canvas动画原⽣组件会遮挡 vConsole 弹出的调试⾯板。在⼯具上，原⽣组件是⽤web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使⽤到原⽣组件时尽量在真机上进⾏调试。
uChart 绘制图表由于层级⾼导致拉出的抽屉⽆法覆盖图表问题。
    ⽅案⼀：使⽤cover-view、cover-image代替view组件实现抽屉组件
    ⽅案⼆：打开抽屉时候将已渲染的图表转化为图⽚替换canvas绘制的图表
  由于cover-view、cover-image组件存在样式的限制，所以适⽤于简单的层级⽐较少的业务开发，⽽对于嵌套层级较多的业务显然⽅案⼆更适合。
  以下是图表转为图⽚的代码，默认转为png格式的图⽚
const context = ateCanvasContext(canvasId, _self);
context.draw(false, () => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: canvasId,
complete(res) {
console.log(res)
_self.img = pFilePath;
}
})
}, 1000)
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。