钉钉小程序中canvas绘图模糊(环形进度条 )

摘要:
vantUI在钉钉小程序中绘制的圆形进度条在手机上查看时非常模糊且参差不齐。解决方案是将画布的宽度和高度扩大10倍,然后在缩放样式中缩小。

在钉钉小程序中使用vantUI绘制的环形进度条在手机端查看时非常模糊有锯齿,解决方法: 将canvas的宽高扩大10倍再用zoom样式进行缩小。

绘制40x40像素的环形进度条代码:
在pages/index.axml中:

// 在页面中设置环形进度条的size和进度条宽度为你想要的大小的10倍或更高
// 这里只设置了size
<van-circle value="{{ 70 }}" text="{{ 70 }}" color="red" layer-color="#fff"   size="{{ 400 }}"></van-circle>

在../circle/index.axml(VantUI的环形进度条页面封装)中:

// 设置canvas的缩放为10分之一或更小(根据放大的比例缩放)
<canvas   type="{{ type }}"   id="{{ canvasId }}">

在../circle/index.js(VantUI的环形进度条逻辑封装)中:

// 如果不需要自定义环形进度条宽度,那么需要在封装中将进度条宽度同时扩大10倍或更高
// VantUI的默认环形宽度是4
strokeWidth: {
   type: Number,
   value: 40,
},

免责声明:文章转载自《钉钉小程序中canvas绘图模糊(环形进度条 )》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇oracle如何重做日志组日志回滚:python(日志分割)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

canvas基础路径(2)

1、canvas路径 canvas路径是指存以贝塞尔曲线为理论基础的区域绘制方式,绘制时产生的线条称为路径。路径由一个或多个直线段或者曲线组成,或者是经过精确计算画出的特殊图形,路径是canvas实现绘图的基础 1.1canvs绘图方法   1.2canvas绘制直线 1.2.1绘制一条直线 绘制直线时,一般会用到moveTo方法与lineTo两个方法,...

pdf.js 前端pdf预览 渲染文本图层支持复制 保证手机端清晰度 双指缩放 alloyfinger(手势)

预览地址: https://feiyefeihua.gitee.io/ 一、渲染pdf核心代码 首先安装 pdf.js 的 npm 版本: npm i pdfjs-dist@2.6.347 使用: import * as PDFJS from "pdfjs-dist"   其中,pdf.js 加载pdf文件依赖了 pdf.worker.js ,通过指定 p...

canvas基础—图形变换

1、canvas转换方法 1.1canvas转换方法 二、canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); step2:在画布(1...

Android SurfaceView

一、SurfaceView简介SurfaceView可以在主线程之外的线程中向屏幕绘图上。这样可以避免画图任务繁重的时候造成主线程阻塞,从而提高了程序的反应速度。在游戏开发中多用到SurfaceView,游戏中的背景、人物、动画等等尽量在画布canvas中画出。什么是Surface在这里要先说说什么是Surface。简单的说Surface对应了一块屏幕缓冲...

解决html5 canvas 绘制字体、图片与图形模糊问题

html5 canvas 绘制字体、图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。 canvas在浏览器中的缩放原理 如果没有设置style那么就以html的属性width,height作为尺寸。 如果设置了style中的width、height,那么...

H5_0009:关于HTML5中Canvas的宽、高设置问题

关于HTML5中Canvas的宽、高设置问题 Canvas元素默认宽 300px, 高 150px, 设置其宽高可以使用如下方法(不会被拉伸): 方法一:        <canvas  height="500"></canvas> 方法二:使用HTML5 Canvas API操作 OK        var canvas...