|
|
|
自定义了一个包含canvas的组件，在一个界面引用时IDE的预览图上可以正常展示，在真机上不能正常展示。真机调试时日志可以正常打印。请论坛各位大佬帮忙看看。
自定义组件相关代码如下：
onReady() {
console.info(`外部传递的数据：`, this.lastColor, this.usedColor, this.total, this.used)
console.info("onReady执行了")
this.drawCanvas()
},
drawCanvas() {
const canvas = this.$element('new-canvas')
const ctx = canvas.getContext('2d')
const radii = 100
ctx.lineCap = 'round'
//画底色（已使用的颜色）
ctx.beginPath()
ctx.arc(radii+10, radii+10, radii, -Math.PI / 2, Math.PI / 2 * 3, false)
ctx.strokeStyle = this.usedColor
ctx.lineWidth = 10
ctx.stroke()
//画剩余部分的颜色
if (this.used > 0) {
var usedPI = Math.PI * 2 * this.used / this.total
ctx.beginPath()
ctx.strokeStyle = this.lastColor
ctx.arc(radii+10, radii+10, radii, -Math.PI / 2, Math.PI * 2 * this.used / this.total - Math.PI / 2, true)
ctx.stroke()
}
console.info("drawCanvas执行了")
}
引入自定义组件的代码如下：
<import name="custom-progress" src="../Widght/CustomProgress">import>
<template>
<div class="tutorial-page">
<custom-progress last-color="{{lastColor}}" used-color="{{usedColor}}" total="{{total}}" used="{{used}}">custom-progress>
div>
template>
<style>
.tutorial-page{
width: 100%;
height: 100%;
}
.swiper{
width: 100%;
height: 70%;
}
</style>
<script>
// 父组件
export default {
private: {
lastColor: '#ff0000',
usedColor: '#0000ff',
total:100,
used:30
},
onInit() {
this.$page.setTitleBar({ text: '个人主页' })
}
}
</script>
IDE的预览截图和手机真机的截图见附件。。
|
-
IDE预览截图
-
真机实际效果，已开布局边界
|
