vue3.0 nvue页面使用canvas报错
3***@qq.com
- 发布：2022-08-11 14:01
- 更新：2022-08-11 15:06
- 阅读：1037
onLoad 中的代码在 onReady 中执行就可以了
-
3***@qq.com (作者)
放在onReady中还是报错
14:55:17.394 [Vue warn]: Failed to resolve component: gcanvas
14:55:17.413 If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
14:55:17.432 at <IndexpageId=1pagePath="pages/index/index"__pageQuery={}>
14:55:17.454 reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!2022-08-11 14:56
我精简了你的代码，可以正常运行
<template>
<view class="content">
<gcanvas
class="canvas"
:style="{ width: `${width}px`, height: '40px' }"
canvas-id="Canvas"
ref="Canvas"
id="Canvas"
@touchstart="touchstart"
@touchmove="touchmove"
@touchend="touchend"
fillStyle="#EEEEEE"
></gcanvas>
</view>
</template>
<script>
import { enable, WeexBridge } from '../../gcanvas/index.js';
var modal = weex.requireModule('modal');
export default {
data() {
return {
title: 'Hello',
subNVue: '',
isCanvas: false,
width: 360
};
},
onReady() {
let { windowWidth } = uni.getSystemInfoSync();
this.width = windowWidth;
var ganvas = this.$refs['Canvas'];
this.canvasObj = enable(ganvas, {
bridge: WeexBridge
});
this.context = this.canvasObj.getContext('2d');
var ctx = this.context;
setTimeout(() => {
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(0, 40, this.width, 40, this.width, 0);
ctx.setStrokeStyle('#6AA0FF');
// ctx.fillStyle('#6AA0FF');
ctx.setFillStyle('#6AA0FF');
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.draw(true);
}, 500);
}
};
</script>
-
-
3***@qq.com (作者)
15:42:05.873 If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
15:42:05.897 at <IdentityInfopageId=4pagePath="pagesB/identityInfo/identityInfo"__pageQuery={}>
15:42:05.911 reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!2022-08-11 15:42
-
回复 3***@qq.com: 这个警告目前可以这样处理：
打开 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-shared/dist/uni-shared.cjs.js 文件，在 NVUE_BUILT_IN_TAGS 中添加 'gcanvas'， 我们会在下一次发版时解决这个问题2022-08-11 15:58
-
-
-
3***@qq.com (作者)
没有警告了， reportJSException >>>> exception function:gcanvas setBackGround for android view, exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND: TextureView doesn't support displaying a background drawable!这个错误还有
2022-08-11 16:20
