aardio - 用paint库模拟表盘

要模拟的效果如下：

一、纯代码绘图实现，效果如下：

 代码如下：

import win.ui;
import gdip;
/*DSG{{*/
var winform = win.form(text="自定义动画演示";right=219;bottom=279)
winform.add(
button={cls="button";text="开始动画";left=50;top=220;right=170;bottom=270;z=2};
plus={cls="plus";left=10;top=10;right=210;bottom=210;z=1}
)
/*}}*/

import godking.paint
var p = godking.paint.fromPlus(winform.plus,false/*自动刷新*/,false/*重绘背景*/);
//缓存刻度阴影等固定图像
var path = p.path( 1 /*0 交叉填充 1 全填充*/);
path.addLines({{95,5},{96,40},{100,45},{100,100},{105,100},{108,38},{103,33},{105,5}} /*多点数组*/);
p.fillPath(path,0x88000000/*填充颜色或brush对象*/);
p.fillEllipse(::RECTF(90,83,30,30),0x88000000);
path.addEllipse(90,83,30,30);
p.fillPath(path,0x88000000/*填充颜色或brush对象*/);
p.drawEllipse(::RECT(5,5,195,195),p.brush.lineBrush({0,0} /*起始坐标*/,{200,200}/*结束坐标*/,{0xFFFF6666,0xFFBB0000,0xFFFF0000}/*颜色数组*/,{0,0.7,1}/*位置数组*/,/*包围模式wrapMode*/),10);
var path = p.path(0);
path.addEllipse(10,10,180,180)
path.addEllipse(20,10,190,180)
p.clip.setRectF(0,0,110,200 ,0/*_GdipCombineMode*/)
p.fillPath(path,0xBB000000/*填充颜色或brush对象*/)
p.clip.clear();
for(i=0;359;6){
	if i%30 p.drawLine(100,40/*y1*/,100/*x2*/,50/*y2*/,0xFF000000,1/*线宽*/);
	else {
		p.drawLine(100,40/*y1*/,100/*x2*/,60/*y2*/,0xFF000000,1/*线宽*/);
		p.drawText(80,10/*y1*/,120/*x2*/,45/*y2*/,tostring(i/6),::LOGFONT(name="arial";h=24;bold=true,color=0xFF000000;brush=null),0,1,1);
	}
	p.rotateCenter(6 /*旋转角度*/)
}
p.fillEllipse(::RECTF(85,85,30,30),0xFFBBBBBB);
p.cacheBitmap.load("刻度" /*缓存名*/, p.getImage("*.png",100/*JPG质量*/,/*截取区域RECT或RECTF*/)/*图像*/);
//画表盘
function drawScale(angle){
	p.clear(0xFFFFFFFF);
	p.resetTransform();
	p.rotateCenter(-90 /*旋转角度*/);
	var path = p.path( 1 /*0 交叉填充 1 全填充*/);
	path.addPie(38,38,124,124,0,angle);
	if angle>=3	path.addPie(35,35,130,130,angle-3,3);
	p.fillPath(path,0xFFFF0000/*填充颜色或brush对象*/);
	p.resetTransform();
	p.drawImage(0,/*y1*/0,/*x2*/200,200/*y2*/,p.cacheBitmap.load("刻度" /*缓存名*/, /*图像*/)/*图片*/,/*透明度或图片属性*/,/*保持比例*/)
	p.plus.update()
}
drawScale(0)
winform.show() 
winform.button.oncommand = function(id,event){
	//开始动画
	for(i=1;360;1){
		drawScale(i)
		win.delay(20)
	}	
}
win.loopMessage();

二、使用图片处理，效果如下：

使用到的图片素材 [ b.png ]：

代码如下：

import win.ui;
import gdip;
/*DSG{{*/
var winform = win.form(text="自定义动画演示";right=219;bottom=279)
winform.add(
button={cls="button";text="开始动画";left=50;top=220;right=170;bottom=270;z=2};
plus={cls="plus";left=10;top=10;right=210;bottom=210;z=1}
)
/*}}*/

import godking.paint
var p = godking.paint.fromPlus(winform.plus,false/*自动刷新*/,false/*重绘背景*/);
p.cacheBitmap.load("刻度" /*缓存名*/,"C:\Users\Administrator\Desktop\b.png"/*图像*/);
//画表盘
function drawScale(angle){
	p.clear(0xFFFFFFFF);
	p.resetTransform();
	p.rotateCenter(-90 /*旋转角度*/);
	var path = p.path( 1 /*0 交叉填充 1 全填充*/);
	path.addPie(38,38,124,124,0,angle);
	if angle>=3	path.addPie(35,35,130,130,angle-3,3);
	p.fillPath(path,0xFFFF0000/*填充颜色或brush对象*/);
	p.resetTransform();
	p.drawImage(0,/*y1*/0,/*x2*/200,200/*y2*/,p.cacheBitmap.load("刻度" /*缓存名*/, /*图像*/)/*图片*/,/*透明度或图片属性*/,/*保持比例*/)
	p.plus.update()
}
drawScale(0)
winform.show() 
winform.button.oncommand = function(id,event){
	//开始动画
	for(i=1;360;1){
		drawScale(i)
		win.delay(20)
	}	
}
win.loopMessage();

三、缓动效果：

 代码如下：

import win.ui;
import gdip;
/*DSG{{*/
var winform = win.form(text="自定义动画演示";right=519;bottom=279;bgcolor=16777215)
winform.add(
button={cls="button";text="开始动画";left=190;top=220;right=310;bottom=270;z=2};
plus={cls="plus";left=150;top=10;right=350;bottom=210;z=1}
)
/*}}*/

import godking.paint
var p = godking.paint.fromPlus(winform.plus,false/*自动刷新*/,false/*重绘背景*/);
//缓存刻度阴影等固定图像
var path = p.path( 1 /*0 交叉填充 1 全填充*/);
path.addLines({{95,5},{96,40},{100,45},{100,100},{105,100},{108,38},{103,33},{105,5}} /*多点数组*/);
p.fillPath(path,0x88000000/*填充颜色或brush对象*/);
p.fillEllipse(::RECTF(90,83,30,30),0x88000000);
path.addEllipse(90,83,30,30);
p.fillPath(path,0x88000000/*填充颜色或brush对象*/);
p.drawEllipse(::RECT(5,5,195,195),p.brush.lineBrush({0,0} /*起始坐标*/,{200,200}/*结束坐标*/,{0xFFFF6666,0xFFBB0000,0xFFFF0000}/*颜色数组*/,{0,0.7,1}/*位置数组*/,/*包围模式wrapMode*/),10);
var path = p.path(0);
path.addEllipse(10,10,180,180)
path.addEllipse(20,10,190,180)
p.clip.setRectF(0,0,110,200 ,0/*_GdipCombineMode*/)
p.fillPath(path,0xBB000000/*填充颜色或brush对象*/)
p.clip.clear();
for(i=0;359;6){
	if i%30 p.drawLine(100,40/*y1*/,100/*x2*/,50/*y2*/,0xFF000000,1/*线宽*/);
	else {
		p.drawLine(100,40/*y1*/,100/*x2*/,60/*y2*/,0xFF000000,1/*线宽*/);
		p.drawText(80,10/*y1*/,120/*x2*/,45/*y2*/,tostring(i/6),::LOGFONT(name="arial";h=24;bold=true,color=0xFF000000;brush=null),0,1,1);
	}
	p.rotateCenter(6 /*旋转角度*/)
}
p.fillEllipse(::RECTF(85,85,30,30),0xFFBBBBBB);
p.cacheBitmap.load("刻度" /*缓存名*/, p.getImage("*.png",100/*JPG质量*/,/*截取区域RECT或RECTF*/)/*图像*/);
//画表盘
function drawScale(angle){
	p.clear(0xFFFFFFFF);
	p.resetTransform();
	p.rotateCenter(-90 /*旋转角度*/);
	var path = p.path( 1 /*0 交叉填充 1 全填充*/);
	path.addPie(38,38,124,124,0,angle);
	if angle>=3	path.addPie(35,35,130,130,angle-3,3);
	p.fillPath(path,0xFFFF0000/*填充颜色或brush对象*/);
	p.resetTransform();
	p.drawImage(0,/*y1*/0,/*x2*/200,200/*y2*/,p.cacheBitmap.load("刻度" /*缓存名*/, /*图像*/)/*图片*/,/*透明度或图片属性*/,/*保持比例*/)
	p.plus.update()
}
drawScale(0)
winform.show() 
winform.button.oncommand = function(id,event){
	//开始动画
	import godking.slowMotion
	for(n=1;25;1){
		drawScale(0)
		winform.text = n++"："++godking.slowMotion.types[n].name++" ("++godking.slowMotion.types[n].name1++")  "++godking.slowMotion.types[n].memo
		win.delay(1000)
		var m = godking.slowMotion(n/*缓动类型*/, true/*按值*/, /*开始值*/, /*结束值*/, /*当前值或进度*/)
		for(i=0;360;5){
			drawScale(m(0,360,i))
			win.delay(10)
		}	
		win.delay(1000)
	}
}
win.loopMessage();