微信小程序cavas画仪表盘_微信小程序仪表-程序员宅基地

const that = this;

wx.createSelectorQuery().select(".credit-canvas").boundingClientRect(function(rect) {

that.setData({

canvasWidth: rect.width,

canvasHeight: rect.height

})

}).exec()

 

var pageData = {}

for (var i = 1; i < 5; i++) {

(function(index) {

pageData['slider' + index + 'change'] = function(e) {

}

})(i)

}

this.timeout = setTimeout(this.drawCredit, 100);

 

 

drawCredit: function(e) {

const that = this;

const ctx = wx.createCanvasContext('credit-canvas');

const black = that.data.blacken;

// 圆弧半径

const radius = this.data.canvasWidth3 * 3 / 7;

// 内圆宽度

const sweepInWidth = 10;

// 外圆宽度

const sweepOutWidth = 3;

// 圆弧初始的弧度

const startAngle = 0.9 * Math.PI;

// 圆弧结束的弧度

const endAngle = 2.1 * Math.PI;

// 圆弧扫过的弧度

const sweepAngle = 1.2 * Math.PI;

let currentNum = that.data.currentNum

var centertext = 1500

var init = centertext / 4;

const leverText = [0, "" + (init * 1), "" + (init * 2), "" + (init * 3), "" + (init * 4), "" + (init * 5), "" + (init * 6), "" + (init * 7), "" + (init * 8), ];

// 信用等级

ctx.translate(this.data.canvasWidth / 2, this.data.canvasHeight * 3 / 4);

// 画内外圆弧

function drawRound() {

// 内圆

// 保存画布

ctx.save();

// 每次设置画笔时要调用这个beginPath,非则以最后一次为准。

ctx.beginPath();

// 设置画笔宽度

ctx.setLineWidth(sweepInWidth);

// 设置画笔颜色

ctx.setStrokeStyle('rgba(255, 255, 255, 0.2)')

// 画内圆弧形,角度为162度~378度,起始位置由于调用过ctx.translate(this.data.canvasWidth/2,this.data.canvasHeight*3/4);,所以在中心位置

ctx.arc(0, 0, radius, startAngle, endAngle);

// 描绘路径边框

ctx.stroke();

}

 

function drawScale() {

// 画刻度

const startNum = 300;

// 画布旋转弧度

const angle = 4.5 * Math.PI / 180;

ctx.save();

ctx.rotate((-1.5 * Math.PI) + startAngle)

for (let i = 0; i < 54; i++) {

if (i % 6 == 0) {

if (i / 6 < 5) {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#ED4F4F')

} else if (i / 6 >= 5 && i / 6 < 7) {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#37C0AB')

} else {

ctx.setFontSize(8)

ctx.setTextAlign('center')

ctx.setFillStyle('#FF8723')

}

ctx.fillText(leverText[i / 6] + "", 0, -radius + 18)

ctx.beginPath()

ctx.setLineWidth(1)

ctx.setStrokeStyle('white')

ctx.moveTo(0, -radius - sweepInWidth / 2);

ctx.lineTo(0, -radius + sweepInWidth / 2 + 1);

ctx.stroke()

} else {

if (i < 48) {

ctx.beginPath()

ctx.setLineWidth(1)

ctx.setStrokeStyle('white')

ctx.moveTo(0, -radius - sweepInWidth / 2);

ctx.lineTo(0, -radius + sweepInWidth / 2);

ctx.stroke()

}

}

ctx.rotate(angle)

}

// 还原画布

ctx.restore();

}

 

function drawIndicator() {

ctx.save();

let sweep = 2;

if (currentNum <= 300) {

sweep = 0;

} else if (currentNum <= 800 && currentNum > 300) {

sweep = (currentNum - 300) * sweepAngle / 600;

} else if (currentNum > 800 && currentNum <= 1000) {

sweep = (5 * sweepAngle / 6) + ((currentNum - 800) * sweepAngle / 1200);

} else {

sweep = sweepAngle;

}

 

// 画指示点圆弧

ctx.beginPath()

var center = startAngle + sweep + sweep * 0.5;

var rad = sweep + sweep * 0.5;

ctx.arc(0, 0, radius, startAngle, center);

ctx.setStrokeStyle('#ED4F4F')

ctx.setLineWidth(10)

ctx.stroke()

// // 画指示点圆弧

ctx.beginPath()

ctx.arc(0, 0, radius, center, center + rad / 2);

ctx.setStrokeStyle('#37C0AB')

ctx.setLineWidth(10)

ctx.stroke()

// // 画指示点圆弧

ctx.beginPath()

ctx.arc(0, 0, radius, center + rad / 2, center + rad);

ctx.setStrokeStyle('#FF8723')

ctx.setLineWidth(10)

ctx.stroke()

// 还原画布

ctx.restore();

}

 

//画指针 (-110 * Math.PI/180)-(110 * Math.PI/180)

function drawPoint() {

//左上的短线

var color;

ctx.save()

ctx.beginPath();

 

ctx.moveTo(0, -10)

ctx.lineTo(0, -radius + 20)

ctx.lineTo(0, -radius + 20)

// //左下的短线

ctx.lineTo(-10, -10)

ctx.lineTo(-6, 5)


var black=893

var angle = (centertext / 110)

if (black <= centertext) {

ctx.rotate(-(110 - black / angle) * Math.PI / 180)

var color = '#ED4F4F'

} else {

if (black > centertext && black < centertext * 1.5) {

var color = '#37C0AB'

} else {

var color = '#FF8723'

}

var data = (black - centertext)

ctx.rotate((data / angle) * Math.PI / 180)

}

ctx.setStrokeStyle(color)

ctx.setFillStyle(color)

 

ctx.fill()

ctx.stroke()

ctx.restore()




 

}

 

function drawCenterText() {

 

//设置文字画笔

ctx.save()

ctx.beginPath();

ctx.setFontSize(30)

ctx.setTextAlign('center')

ctx.setFillStyle('orange')

ctx.fillText(black, 0, radius / 2)

ctx.stroke()

ctx.restore()

 

}

// ctx.fillText("100")

//画红禄蓝的圆弧

drawIndicator();

// drawRound();

//画白色分割线

drawScale();

drawPoint();

drawCenterText();

 

ctx.draw()

},

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/innerwork/article/details/97786100

智能推荐

LOJ2540 「PKUWC2018」随机算法(状态压缩)_pkuwc2018 状态压缩-程序员宅基地

文章浏览阅读138次。传送门:https://loj.ac/problem/2540solutionsolutionsolution:直接状压dpdpdp做fs,if_{s,i}fs,i​表示独立集的状态为sss,考虑到排列的第iii位枚举下一位转移考虑下一位可以填什么考虑现在可以加入独立集的点,之前肯定没考虑过,直接转移到fs∪x,i+1f_{s∪{x},i+1}fs∪x,i+1​不可以加入独立集的点..._pkuwc2018 状态压缩

快速搭建一个网关服务,动态路由、鉴权的流程,看完秒会(含流程图)-程序员宅基地

文章浏览阅读150次。点击上方蓝色字体,选择“标星公众号”优质文章,第一时间送达前言本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流程及业务处理,有兴趣的一定看到最后,非常适合没接触过网关服务的同学当作入门教程。搭建服务框架SpringBoot 2.1<parent><groupId&...

看懂这篇文章就够了!什么是Redis缓存雪崩、缓存穿透和缓存击穿?五分钟统统搞定-程序员宅基地

文章浏览阅读462次。前言今天的分享主要是讲下这个 redis,什么是缓存雪崩、穿透和击穿。这三个技术问题是我们平时开发工作中和面试过程中,必须要会的知识点,因为目前的互联网系统没有几个不需要用到缓存的,只要用到缓存的话,就需要掌握这三个技术问题。基本上无论哪个老哥去大厂面试,都会被问题这几个问题,所以作为一个互联网开发程序员来说,这个几个技术问题大家是需要搞懂的。而解决这几个问题的方案,通常有布隆过滤器,还有分布式锁。布隆过滤器是1970年的一项技术,距今也有50年了,之所以能够应用至今,说明这项技术还是挺优秀的,

做好的界面如何加上登录界面_网页中如何添加用户登录界面-程序员宅基地

文章浏览阅读1.1k次。1. 添加登录的界面类鼠标右键工程,点击添加新文件在弹出来的界面中选择Qt/Qt设计师界面类,点击choose在接下来的界面中选择界面模板为widget,点击下一步。输入界面类的类名Login,点击下一步点击完成。会发现工程里多了login.h、login.cpp、login.ui三个文件。2. 增加登录验证界面类在原有的main.cpp(软件都是先从这里启动的)里的main函数里会看到,程序启动干的第一件事是声明widget w;然后w.show();这样主界面类就出来了,现在_网页中如何添加用户登录界面

如何卸载modelsim_modelsim卸载-程序员宅基地

文章浏览阅读8.5k次,点赞10次,收藏10次。右击选择卸载在程序栏中选中mentor GraphicsProducts,右击卸载或更改点击全选,下一步,删除。_modelsim卸载

JavaWeb中使用JSON-程序员宅基地

文章浏览阅读309次。前言: 最近也是期末了,有好多好多文档和实验报告要交,所以都没啥时间写文,这段时间清闲了,来补一下之前学习时遗漏的一些知识树,话说就没人吐槽这个JSON图标好丑吗?什么是JSONJSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性,更...

随便推点

生信分析--入门实践一条龙的CWL中文教程_生信分析入门教程csdn-程序员宅基地

文章浏览阅读2.3k次。生信分析--入门实践一条龙的CWL中文教程。关于下载安装所有中文教程,开始学习吧_生信分析入门教程csdn

JavaScript的学习4——面向对象编程_编写一个函数来创建xiaoming:-程序员宅基地

文章浏览阅读177次。前言JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。Object.create()方法可以传入一个原型对象,并创建一个基于该原型的新对象,但是新对象什么属性都没有,因此,我们可以编写一个函数来创建xiaoming:// 原型对象:var Student = { name: 'Robot', height: 1.2, run: function () { console.log(this.name + ' is r_编写一个函数来创建xiaoming:

前端:webpack-程序员宅基地

文章浏览阅读39次。前端相关基础知识webpackwebpack1.1 什么是webpack1.2 webpack安装安装webpackvue脚手架webpack1.1 什么是webpackwebpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler),分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Sass,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。1.2 webpack安装注意:请先安装node环境we

Kryo序列化实现源码分析_python kryo 实现-程序员宅基地

文章浏览阅读1.1k次,点赞2次,收藏2次。在使用Kryo序列化之前需要将被序列化的类通过register()方法注册到其中去。在register的过程中,实则是要根据要序列化的类生成对应的Registration,Registration中记录了类的唯一id与对应的序列化类,在Kryo中,默认的序列化对象是FieldSerializer,没有特别指明的,都将以FieldSerializer来进行序列化。public Regist..._python kryo 实现

最全面的AndroidStudio配置指南总结-包括护眼模式-程序员宅基地

文章浏览阅读3.7k次。使用AndroidStudio开发APP已有半年多的时间了,从刚开始的不习惯到慢慢适应再到逐渐喜欢上AndroidStudio,中间的过程颇有一番曲折,现在把自己对AndroidStudio的配置心得总结下来,分享给大家,希望给后来人带来方便。强迫症童鞋的护眼模式设置方法传统模式的编辑域护眼模式的编辑域设置保护视力颜色 #C7EDCC(护眼绿)

【批处理DOS-CMD命令-汇总和小结】-跳转、循环、条件命令(goto、errorlevel、if、for[读取、切分、提取字符串]、)cmd命令错误汇总,cmd错误_cmd errorlevel-程序员宅基地

文章浏览阅读4k次,点赞5次,收藏28次。此文主要研究对代码分支化执行和重复利用的实现。分支化执行指根据中途的实际执行结果决定下一步执行的代码,跳转的代码行号;分支化执行大概分为跳转执行、条件判断执行;因此,分支化执行基本是只执行部分代码,部分代码不执行。代码重复利用的实现,一方面依赖程序调用(详见本人写的CMD命令实现程序调用一文),另一方面基于循环命令。打印goto命令的帮助信息。我们可以看到该命令的参数只有一个label。具体应用方法——在goto命令的下方放一行,开头是英文冒号后边紧跟“分支标识符”,然后再goto所在行后面加上“分支标识符_cmd errorlevel