zoukankan      html  css  js  c++  java
  • 钉钉小程序中canvas绘图模糊(环形进度条 )

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

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

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

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

    // 设置canvas的缩放为10分之一或更小(根据放大的比例缩放)
    <canvas class="van-circle__canvas" type="{{ type }}" style=" {{ size }}px; height:{{ size }}px; zoom: 0.1" id="{{ canvasId }}">
    

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

    // 如果不需要自定义环形进度条宽度,那么需要在封装中将进度条宽度同时扩大10倍或更高
    // VantUI的默认环形宽度是4
    strokeWidth: {
       type: Number,
       value: 40,
    },
    
  • 相关阅读:
    lodash chunk
    lodash.slice
    ⚡ vue3 全家桶体验
    构建一个简约博皮的过程
    [译] 制作 Vue 3 的过程
    ⚠ | 不要再使用 markdown 主题了!
    win 常用命令
    2020年了,别再重复学习原型了
    删除 linux 导致原来的 win10 进不去
    手写一个文章目录插件
  • 原文地址:https://www.cnblogs.com/lzb1234/p/13738908.html
Copyright © 2011-2022 走看看