【PersimmonUI柿饼学习营】基于柿饼UI仪表盘的制作--二牛哥

2018-9-17 00:03 [复制链接] 1 2006

本帖最后由 二牛哥 于 2018-9-17 00:34 编辑 : s1 F  P0 l7 i% T: J: f

; d: z- i9 [; W  Z- o

9 ]& S3 Q8 G+ M
            基于柿饼UI仪表盘的制作
4 g" o2 U) j$ `% b
- R( E9 g6 `' Q' W4 A, S) Q
前言:
本次的工作将完成两个目标,1 制作仪表盘APP, 2 接续上次帖子的内容将平板电脑UI
增加一点新鲜元素,然后将仪表APP“装入”其中。为突出主题本文档分上、下篇分别描述。
) H. I& q4 x( H4 ]
; h) [% V- A( p, N) l# E
                                        上篇------制作仪表盘APP
  目标:
7 U$ y/ o9 k0 L) b8 J( P; c2 p
       通过PersimmonUI制作两个仪表盘,本例中可理解为汽车速度计和流量表(或电量表),
仪表具有开关背光和指针控制功能。

3 V8 p/ `# G- c2 w9 ~7 Y
二、方法:
       1、 工具
       设计好仪表效果图,通过PersimmonUI的画图控件------Canvas作为载体,采用系统API
函数分别绘制仪盘盘面、指针、数字、环形渐变圆等元素将效果图中的各部件逐一呈现。
- p, u3 N2 v& H+ Z. P
       2、 算法
       首先确定“盘面”所占弧度数量,然后确定弧度的始、终位置,接着根据刻度数量确定盘
面弧度等分切割数量,最后根据三角函数结合笛卡尔直角坐标系可计算出指针的指向。
& T  T& h! _" I3 [
三、步骤:
1 建立工程并建立一个页面---page1(分辨率为800x480),分别拖动CanvasButton控件
到页面按下图方式放置
- Y) M2 O. b% K
1.png
1 S, w; y% v5 _) Z; A8 ~
设置Canvas控件属性------背景颜色为白色。
分别设置4个按键的bindtap属性为onButtonA/B/C/D,控件字体hz16,文本为“开灯”、
“关灯”、“加速”、“减速”。
2 根据仪表效果图分别绘制弧段、刻度弧、指针、背光灯、背光弧,如下图所示
(具体方法详见程序):
1 l2 X9 C; \0 A9 y& S9 m* C; D2 S9 J
2.png
5 _5 Y$ g6 O4 F# b
3 如法炮制,再绘制一个小仪表,如下图所示:
# I0 _) z" q: g$ _8 {: g% X5 ^( F9 v
3.png
0 \) `% B+ z# r) s, J, l+ ^
4 将大小仪表进行组合,如下图所示:
4.png
/ k4 R4 M( L9 s* A2 E
6 编写按键功能函数,分别完成开灯、关灯、加速、减速功能,然后再将各种的功能函数
与绘图代码填入各自的事件驱动函数中。
: {* D1 V" \, }0 Y; D
7 运行程序,验证功能

% r1 ], M6 w) Z' U7 a$ F2 H2 Q
(1)      开关灯动画效果图

% N6 F& b2 }* u3 I% O
swLight.gif
' l* K  Q: g1 J& u
(2)      加、减速效果图:
GIF动画2(我制作动画的过程中出现了异常,未制作成功,稍后再贴)

# a  B% m! F. v) Q5 t) n

1 W7 `$ P, Q* }9 z8 t
8 关键代码:
  1. var value1 = 0;
    6 s% q7 e5 l3 {2 k' I
  2. var value2 = 0;
    0 o, `5 l7 ^) \5 e
  3. var lightFlag = 0;9 c$ L# ], y, Z3 H( l

  4. 4 L$ w9 P6 y7 B# M6 Y* w5 e2 t

  5. 1 O) r) N. m1 i
  6. function OpenLight() { lightFlag = 1; };+ o: |5 O$ r3 J: W4 ~
  7. function CloseLight(){ lightFlag = 0; };
    1 r. V" r' E$ J5 u% v3 P! Q6 l
  8. % Y6 a8 O6 Q' {% P; w! |
  9. function IncMeter1(){ if(value1<=178) value1+=2; };
    3 s6 `6 j) T6 @9 ~+ U/ y
  10. function DecMeter1(){ if(value1>= 2) value1-=2; };
    2 Y" c! _  A3 D% l- N
  11. # x4 S7 o) T1 H" W7 I9 I6 c5 Q
  12. function IncMeter2(){ if(value2<=97.5) value2+=2.5; };
    . D* l" ^( `& j- ^/ h2 B
  13. function DecMeter2(){ if(value2>= 2.5) value2-=2.5; };! S% t0 @, `  `: {& o) Y
  14. ( E2 z. t+ w( J) o$ Q# X
  15. function ResetValue(){  value1 = 0; value2 = 0; };% e) b4 n9 R3 J* f5 q6 C2 V% C
  16. function SetValue2() {  value2 = 100; };
    . w" ^6 s- C: U- x$ W
  17. ) ~- `; o5 Z8 {) f2 S
  18. var page = {+ N2 Q% J& o! K
  19. . S) z( p( z4 E$ j1 K; p, ^& P
  20. / f# Q4 {% x% Y$ N; n0 S8 K
  21. * D' s  i  F; H' ~  q( x1 H
  22. onLoad : function(e) {. x% d# a1 d8 p3 V( t

  23. 2 ^( d7 r2 v( I6 h8 ]3 Z7 I
  24.              //==========================================big meter=============================================- o+ W2 I3 V; r( U- b& y& E4 L
  25. 9 X% \9 ?" W  E) h7 @

  26. 6 m, {. Z- C; K. l' d
  27.                   DecMeter1();   : q0 |3 b* _, q/ c4 t5 u0 x# O% M
  28.                  // CloseLight();* u# S6 _1 z5 K. m
  29. 0 r, y$ ?3 v/ W# i5 [
  30.                 var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象
    $ M- ^# l. C% w2 ?& z9 d8 B$ {0 I* [
  31.                 if (context)
    - f( J1 G' [& |
  32.                 {, S/ T7 ^3 k9 \6 S
  33.                         var point = { x: 200, y: 200 };     //圆心坐标,相对于画布
    % \4 w; `% h% z" T0 W
  34.                         var radius = 130;                   //半径( _7 y# L& I2 M1 @5 g
  35.                         var start = -1.5 * Math.PI;        //起始弧度% y4 ]+ b3 Y2 y) f5 ~, D. V; ]; A8 n# E

  36. . W5 R& |# }2 p4 r- N$ [6 F9 G
  37.                         context.setLineWidth(30)
    - y" |& H! }' _; l4 j
  38.                         context.setStrokeStyle('#91C7AE')  ( J- [$ B; v' K4 x
  39.                         context.setFillStyle('#91C7AE');
    7 k# D4 e7 o0 ?8 n* I
  40. $ x" w0 G- `% c0 D7 U6 Z1 c
  41.                         for( var i = 0; i <=9; i++ )
    + w4 @0 F+ j0 M) f2 N6 r
  42.                         {7 l; J8 _* y1 h  |
  43.                                 var stop = start + 0.15 * Math.PI ;     //结束弧度
    ' x4 i/ O  j; F2 I' p  I
  44.                                 var x = Math.floor(110 * Math.cos(start)) + 200;
    0 [5 l3 D* r/ O9 c& M
  45.                                 var y = Math.floor(110 * Math.sin(start)) + 200;& k# J7 t. z/ a+ ?9 S$ G1 S
  46.                                 var v = 20 * i;  |' [  s- j# P0 O- E

  47. 0 l+ B) O2 C1 A& K
  48.                                 if (i >= 7)
    & B, n8 n; h, {+ e
  49.                                         context.fillText(v.toString(), x - 10, y);
    ( c5 `5 s7 B8 @( e
  50.                                      G/ G8 m7 i& o9 s: g8 G) ?
  51.                                 else/ I2 h0 T7 z7 e4 l: `- u/ u; v
  52.                                         context.fillText(v.toString(), x, y-3);
    9 H: |( h; U) }+ W' k4 x6 i& ?+ `
  53. 8 O. C" P1 o# A
  54.                                 if (i == 9), R3 y6 O3 s1 S7 r# m
  55.                                         break;5 u4 m  R: n: }9 N
  56. * R  _$ H- q) M) Y6 ]
  57.                                 context.beginPath();    //开始新的路径& \9 I2 C0 B  P8 [

  58. " G5 N/ a- T/ g% e3 j5 z& Z
  59.                                 context.arc( point.x, point.y, radius, start, stop - 0.003 * Math.PI, false);     //画一段圆弧
    & z/ I: r3 a; q0 g
  60. 7 v6 b, \; |* r* L
  61.                                 context.stroke();                         //填充路径% S$ v6 c, ~4 ?! I0 f0 G; }

  62. 6 ~9 i& u  a9 B0 [/ u9 J
  63.                                 context.closePath();                    //关闭路径8 h% I) U; l5 A' E: R# d
  64.                                 start = stop;
    ( G: ?$ i0 n$ U* y7 n" d# V5 P

  65. 0 d( k0 |8 I3 B" J
  66.                                 if (i == 2)
    ! K4 p7 c+ A) T4 F' ^. S
  67.                                 {
    , @2 @3 S6 c9 s; b5 p) N* M
  68.                                         context.setStrokeStyle('rgba(255, 128, 0, 1)')//('#63869E'). A, I6 z; ~+ e, d9 P  Q+ o+ k
  69.                                         context.setFillStyle('#63869E');
    / k6 Z, h8 n" R* @5 O8 c/ E
  70.                                 }
    7 G9 N% b/ w' S0 `4 c5 C* x: f* P
  71.                                 else if (i == 6)7 B; D+ i; Z0 d5 ~, ~
  72.                                 {6 ~* [* C2 R6 k+ r8 I8 Z: _5 t( i9 v
  73.                                         context.setStrokeStyle('#C23531')3 x. ?7 G! f+ {) S9 v
  74.                                         context.setFillStyle('#C23531');
    , |' S+ U0 {. p
  75.                                 }$ W! @- |2 R- Z4 ]
  76.                         }  j5 {6 H, p- P( T# q1 F+ o) U

  77. 9 ^& U/ p* \7 _$ n+ u: x& x
  78.                    //----------------------------------------------------//4 g5 N1 f# B$ A1 {6 B+ b
  79.                         //画背光弧 0 F+ w0 H7 f2 b0 K: P
  80.                         context.beginPath()                    //开始路径
    5 t) z# v1 a0 C8 O! r# c
  81.                         context.setLineWidth(10). V3 m2 Q3 m3 O& ?' O. t$ I  G6 k
  82.                         if( lightFlag>0 ) context.setStrokeStyle( 'rgba(255, 0, 0, 1)');7 L4 W$ T' U2 k/ N0 ]
  83.                         else context.setStrokeStyle( 'rgba(0, 0, 0, 1)');6 M$ R' N# D3 f
  84.                         context.arc( point.x, point.y, 175, -1.5 * Math.PI, -0.15 * Math.PI, false);
    # m! D' D/ w' U  y( p, g
  85.                         context.stroke()
    3 J4 O; h% x6 c. i- T6 p1 e0 p
  86.                         context.closePath();   2 k' x( O, A# s2 o
  87.                         //----------------------------------------------------
    & }  s8 k+ j  x3 m; n
  88.                         //画背光灯9 p. k* N( c( Z* n. P# h! i
  89.                         // Create circular gradient. s4 p1 \7 |6 N& x7 f8 _# Y- i
  90.                         var grd = context.createCircularGradient(200, 200, 70)                        4 O5 I6 W# ?  V
  91.                         if( lightFlag>0 ) grd.addColorStop(0, 'blue')2 |, u1 R$ h3 ~5 H- c* U' M( D
  92.                         else grd.addColorStop(0, 'black')
    3 B' l7 [: @3 B2 D2 f
  93.                         grd.addColorStop(1, 'white')
    - @- W; @, Q( r( n7 B
  94.                         context.beginPath()
    / c3 E& x% C% N* ], v: x
  95.                         // Fill with gradient- g- a1 c5 U0 G# f, b' B
  96.                         context.setFillStyle(grd)/ C/ N3 N) `  i
  97.                         context.fillRect(120,130, 150,150)
    * c/ N/ p& D+ z% Q* ]; T
  98.                         context.closePath();    & I' r! {7 d; L" y4 I/ F2 v
  99.                         //----------------------------------------------------\\0 H3 {, p- I- Y3 g4 ]' p. X
  100.                         
    . m/ F6 x% F& ^9 {- b
  101.                         radius = 150;. R" v6 `$ a' z' p
  102.                         start = -1.5 * Math.PI; + R8 e% o( l- ?
  103.                         context.setLineWidth(22)- g8 R" N) l  W4 L2 [
  104.                         context.setStrokeStyle('#91C7AE')   
    4 o8 @+ h) p6 y
  105.                         for( var i = 0; i < 90; i++ )           // 画50个刻度,即共10个大格,每个小格中画5个刻度
    ! y5 A  s  }" @, O) A4 p# \; v" n
  106.                         {! \# t. i$ U: b7 w  Q9 h$ W' M1 x
  107.                                 var stop = start + 0.015 * Math.PI ;
    " N9 q: W; [! S" A7 v

  108. 6 D7 M, {# [' i- h
  109.                                 context.beginPath();
    2 U" y2 W2 H5 O9 Q5 |% L
  110. ! q$ J. L$ j# y" w
  111.                                 context.arc( point.x, point.y, radius, start, stop - 0.003 * Math.PI, false);
    " u; m( n6 @6 W4 x. s; s+ C# {8 C  ?. a

  112. & k3 H% W7 X# u) U# h, _# X
  113.                                 context.stroke();
    ' U+ R; N* _6 l

  114. ' y; L- @, u4 d! f
  115.                                 context.closePath();
    , J1 i: x$ T  P' I8 ?, `
  116.                                 start = stop;
    & z2 U5 d! {# s. a6 Z8 ?0 T

  117. + v7 O) h7 K, D" N
  118.                                 if (i == 29)( Z( h, \# u) \( x3 c7 |
  119.                                 {
    : m# s; S1 F! ]$ W( {
  120.                                         context.setStrokeStyle('rgba(255, 128, 0, 1)')' q: Y% A* {  ^# C8 [; L* L0 Z& p8 O5 H
  121.                                 }
    # ?0 ^2 I- u* v6 I
  122.                                 else if (i == 69)
    5 C' m1 F) l8 E0 \# F
  123.                                 {
    7 Q$ Q5 b. m- H
  124.                                         context.setStrokeStyle('#C23531')
    ! m$ x' J$ Z' a4 C
  125.                                 }4 I8 b! P8 k% w# n' z
  126.                         }& M, z6 F( n9 G
  127. 3 r: ^/ M7 G( h, z% U+ i/ m

  128. - A. q  z* l. W' D& _  C
  129.                         {   //画指针
    , L; N5 N8 h2 M0 g
  130.                                 //var value1 = 77;     //表盘当前值( \: K# H4 y1 B  ~- s) S8 x
  131.                                 var radius = 115;
    # P- f% F! Y7 f0 h
  132.                                 var x = Math.floor(radius * Math.cos((-1.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
    ) M" v/ Z$ q; n3 Y0 d/ b& ]
  133.                                 var y = Math.floor(radius * Math.sin((-1.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;
    " G, z: [3 V6 I1 c/ T  p* [: e: d
  134. , a% `  o4 c; z& Z
  135.                                 context.beginPath();- h8 y: v0 H! Z& B% K: K2 S; w

  136. & Y: p1 T$ o0 t' h; n8 l
  137.                                 //context.setFillStyle('rgba(255, 0, 123, 0.3)');; M+ Z. e: B! g/ _$ n
  138.                                 context.setFillStyle('rgba(20, 50, 120, 1)');6 J9 @- ?- U/ Z7 e7 C+ K; a
  139.                                 context.moveTo(x, y)+ v# [' ^4 y, x$ r4 H' w) \. t* c# M

  140. ! B! b0 ?- e, e4 e/ p  A$ K9 g
  141.                                 radius = 15;# S$ G: Y! m) ]5 l+ n8 q
  142.                                 x = Math.floor(radius * Math.cos((-1 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;
    . j6 J! T7 V8 Y9 O6 _
  143.                                 y = Math.floor(radius * Math.sin((-1 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;$ [8 d& Q2 E. X$ @$ u$ F: {, Y
  144.                                 context.lineTo(x, y);! u: b4 n! N) W" I' e% E

  145. 2 t/ R! J2 ~* H# K3 G  w
  146.                                 radius = 20;
    9 s9 M1 v+ k) d9 |, s
  147.                                 x = Math.floor(radius * Math.cos((-0.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;0 i' f3 z2 w1 t7 [& ^: J1 Q
  148.                                 y = Math.floor(radius * Math.sin((-0.5 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;1 y2 g6 G. h# B9 D- K
  149.                                 context.lineTo(x, y);
    / C' K% ?' ]$ I) B& J: Q
  150. 0 r3 U6 S1 O, R6 P2 N& v
  151.                                 radius = 15;
    ; X. t6 k; r: u* u% @7 ]
  152.                                 x = Math.floor(radius * Math.cos((0 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.x;) W: Z% [4 V0 }. r1 U
  153.                                 y = Math.floor(radius * Math.sin((0 * Math.PI + value1/2 * 1.5 * Math.PI / 100))) + point.y;6 k# _) |" N+ N( ^; ^
  154.                                 context.lineTo(x, y);0 _( p7 G8 d" A8 K4 E4 o
  155.   u& D& K& s# n
  156.                                 context.fill();
    + p* p0 r! u+ C
  157. 8 J% S) m: `5 K" z+ v: l0 l3 q
  158.                                 context.setTextAlign('center')
    ; K9 J) B: F5 f1 E3 Y. Y4 |2 a
  159.                                 context.fillText(value1.toString(), 200, 250)
    2 G- t7 K$ J& H* C) S- r

  160. & u2 U, E7 p3 u9 d' @, {
  161.                                 context.closePath();
    # L0 G  V4 @5 S% e" p
  162.                         }
    * b: Q/ j" G" H8 M+ d) t" A7 M
  163. 7 E9 J" f3 P, X) J
  164. $ Q3 n- T  T) L
  165. % Y$ W" v2 J$ W( C; c
  166.                         //context.draw();                / @5 H4 m* A0 R5 E  h/ a
  167.                         
    ( H+ @( e; \* w2 S! P7 k; z5 @' x
  168.                         0 r1 R! D' @5 v  r7 R
  169.                 }& O) t6 K4 r8 r

  170. , @+ Q1 I8 Y% S/ q. i+ a

  171. 8 o5 c6 s# ~, @/ E" C: Z8 h
  172.                //========================================= small meter =====================================================' O. u/ t, t2 `& Q# u5 @- K- t, z
  173.            
    " \9 e/ Y0 j1 ^# o9 h6 J/ r; c
  174.                 IncMeter2();6 d- q0 h: M* n
  175.                
    ! ^7 n' ^, k7 P1 b$ X+ e

  176. 7 p8 w! o+ H  a, i0 N1 _

  177. : `! M0 Q- t0 }6 L7 Z! ~
  178.                 //var context = pm.createCanvasContext('Canvas1', this)   //获取画布对象" P) z3 M$ U! e1 T
  179.                 if (context)3 e. Z' G6 u% n; {: Z* m
  180.                 {
    , P2 j: m# }0 k
  181.                         % S, @7 n2 d! {' h) u9 Q
  182. / D4 p4 ~" v& {8 y% ]
  183.                         var point = { x: 350, y: 330 };     //圆心坐标,相对于画布+ n+ y# U7 E4 b6 r
  184.                         var radius = 75;                   //半径) b- M0 K$ {! m! @. n% S8 I
  185.                         var start = -0.8 * Math.PI;        //起始弧度
    : j' Y9 _2 h, {, A; {

  186. & f$ }3 [. @' w) s: F9 Q& J3 N
  187.                         context.setLineWidth(30); m; k, m9 R- a6 G+ J6 p
  188.                         context.setStrokeStyle('#91C7AE')
    / L. S) A1 C" Q) e
  189.                         context.setFillStyle('#91C7AE');% z( D! F8 A9 m8 ^, v

  190. * C4 O# i; z- w1 y7 L
  191.                         for( var i = 0; i <= 4; i++ )
    & d7 Q+ G6 Y. I
  192.                         {& D% r# W/ X( E: I+ ^! e: M
  193.                                 var stop = start + 0.15 * Math.PI ;     //结束弧度
    * j( ^  V2 @( x, B2 p
  194.                                 var x = Math.floor(108 * Math.cos(start)) + point.x;- g' |4 E/ n8 m
  195.                                 var y = Math.floor(108 * Math.sin(start)) + point.y;# Q) j- g) Y, [( y  D2 U
  196.                                 var v = 25 * i;
    0 s- V; g. F7 V8 b
  197.                                 
    1 W/ `' a. w% x( g. U
  198.                         
    / j$ H8 Q4 n( f' r1 e
  199.                                 if (i >= 2)
    % u  _  f; I6 ], o6 w0 D
  200.                                         context.fillText(v.toString(), x-10 , y);
    0 N" D# Q0 {. S/ N
  201.                                 else
    , I% \! o, F( O1 ]
  202.                                         context.fillText(v.toString(), x, y);
    / V- ~- U- g# D0 L, X5 l
  203. 1 b) u0 M2 Y! ]
  204.                                 if (i == 4): Z0 B0 ^* D$ P$ [$ e
  205.                                         break;
    ) N" F: @5 C5 m! u5 F& r: P" o
  206. % g1 h5 p3 S! v0 x% Z- c
  207.                                 switch(i){  J$ Z2 }6 H4 N' I" t% b
  208.                                         case 0: context.setStrokeStyle('#ff0000');  break;5 G% x$ w0 f( F: N- H% R
  209.                                         case 1: context.setStrokeStyle('#ff7f00');  break;: u9 A/ h5 T+ u
  210.                                         case 2: context.setStrokeStyle('#91C7AE');  break;
    ! }/ V0 T( N. v( n$ }; ?  V
  211.                                         case 3: context.setStrokeStyle('#00ff00');  break;
    ( V# D' ], Z7 Z5 s& G, K
  212.                                         default:  break;5 p/ _3 Z4 ?, n+ n
  213.                                 }
    - _% \+ @1 p0 S

  214. , p1 R1 ?5 [. q4 X3 C  S
  215. , M$ ^- _0 O  [7 T% ^4 y
  216.                                 context.beginPath();    //开始新的路径
    3 F8 F2 l) H" E6 o9 }5 N3 i
  217. " M5 r% Y& s) t% \) `7 h9 Z
  218.                                 context.arc( point.x, point.y, radius, start, stop - 0.006 * Math.PI, false);     //画一段圆弧9 w; f: V0 d0 K# l
  219. . V, j9 K: I  J+ h% Y
  220.                                 context.stroke();                         //填充路径
    ( Z& A5 {% V. @' F9 \* D) `

  221. 9 S$ |" s/ H* j, q+ N! m& A( I& ?* `
  222.                                 context.closePath();                    //关闭路径
    % ]1 w$ l/ b% B3 n8 o
  223.                                 start = stop;
    4 D. w+ |# b' u! F* b# J
  224. - h3 f9 V" w5 Q# l3 Z
  225.                                 if (i == 1)
    0 B/ W! [' v5 T. k1 m4 v( q
  226.                                 {
    + w  M- ]8 A& m4 e& G* R
  227.                                         context.setStrokeStyle('#63869E')7 I8 f+ J. b, k; X" ^8 J% O
  228.                                         context.setFillStyle('#63869E');
    ( \) j6 Y) `+ f- [" Z
  229.                                 }
    0 D' H$ D. m7 W: }; n
  230.                                 else if (i == 7)  E( g2 b9 _/ ]$ j! L
  231.                                 {6 V; p6 C$ O+ _
  232.                                         context.setStrokeStyle('#C23531')* v& M  |1 J/ w
  233.                                         context.setFillStyle('#C23531');
    . t. m6 L% p8 s) e7 s2 w/ O4 k
  234.                                 }" x) E3 D2 K0 s, L$ I& j
  235.                         }
    3 q5 F1 n6 k: ^; f
  236. $ a' U) M! S# T! ?
  237.                    //----------------------------------------------------//
    4 K/ E% u. |, M) X' L& t+ _
  238.                         //画背光弧
    6 U( }! b1 q* l/ D2 v
  239.                         context.beginPath()                    //开始路径
    ! U/ |. T+ a( r, L/ m# p$ s, s4 `
  240.                         context.setLineWidth(10)6 }. J/ f. G2 v7 Y9 d2 s3 m
  241.                         if( lightFlag>0 ) context.setStrokeStyle( 'rgba(255, 0, 0, 1)');
    / ~1 V1 A" L2 w1 I8 ?* T
  242.                         else context.setStrokeStyle( 'rgba(0, 0, 0, 1)');
    0 c9 J4 U: Q3 P2 ~) A6 F. Q; J) L
  243.                         context.arc( point.x, point.y, 120, -0.8 * Math.PI, -0.2 * Math.PI, false);5 s" u, ]/ M# F
  244.                         context.stroke()! f" u' W; q7 H, F! z
  245.                         context.closePath();   
    % U4 H/ ?" e4 p2 r0 V
  246.                         //----------------------------------------------------2 O) H0 _8 S9 h" h( ]* r
  247. 4 P- h" g: g" J5 N& p  l
  248.                         {   //画指针
    1 H$ K5 |* Q: q
  249.                                 //var value = value2;     //表盘当前值
    5 V: @) a; g# \. n' o$ J
  250.                                 var radius = 65;
    9 U: \7 Q. _/ ~( J5 J3 C
  251.                                 var x = Math.floor(radius * Math.cos((-0.8 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;& M' Q, N4 a" M0 s4 K4 |: b) r0 p6 [
  252.                                 var y = Math.floor(radius * Math.sin((-0.8 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
    4 t7 ]5 o2 B: w

  253. ; X9 \! c$ _- h/ u! q+ |: ^/ a
  254.                                 context.beginPath();
    8 ^% X1 v' I1 ?5 ?: e4 o$ k

  255. ; `+ x  \# F: }, V& b0 B
  256.                                 //context.setFillStyle('rgba(0, 0, 255, 0.7)');% ?; P- T& S/ m7 o# V; r
  257.                                 context.setFillStyle('rgba(20, 50, 120, 1)');! X9 F! k, X% L. x3 h2 Y2 W
  258.                                 
    ' v) S" i+ h: W6 v5 [" A7 s
  259.                                 context.moveTo(x, y)
    & D6 S4 n! }# H$ U1 ]
  260.   L4 C; U7 ~" D# y! D8 V/ e
  261.                                 radius = 8;% F/ y0 V) Q- `2 Y/ A, x
  262.                                 x = Math.floor(radius * Math.cos((-0.3 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;& Q" p3 K, S" }# l, h% [: a
  263.                                 y = Math.floor(radius * Math.sin((-0.3 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;6 C( a$ [. Q9 T+ @: b
  264.                                 context.lineTo(x, y);6 o0 k" Z: J0 V

  265. ( P# M; y9 b8 d% D
  266.                                 radius = 10;" n! r9 a$ H6 h3 o8 M
  267.                                 x = Math.floor(radius * Math.cos((0.20 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;8 e3 w! Z+ F/ k2 S- ]7 p; p- r) {
  268.                                 y = Math.floor(radius * Math.sin((0.20 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
    * S  \& ~0 M% o! T& l. k
  269.                                 context.lineTo(x, y);
    $ k+ _& T. j! F1 b" K* `5 d/ `

  270. : z4 g2 ~& E% N: P8 M
  271.                                 radius = 8;
    ; R4 D# n! d4 V* h6 a" d
  272.                                 x = Math.floor(radius * Math.cos((0.65 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.x;: D# V( W" r2 Z  m
  273.                                 y = Math.floor(radius * Math.sin((0.65 * Math.PI + value2/2.5 * 1.5 * Math.PI / 100))) + point.y;
    ) ^: q+ d1 D2 {* V8 r
  274.                                 context.lineTo(x, y);
    2 R# v6 F  ]5 `

  275. ( \, p# h; n) D# X
  276.                                 context.fill();3 `% {- S# y  }+ [$ B6 F9 u5 u
  277. 5 C9 a: C4 W5 I+ e
  278.                                 context.setTextAlign('center')
    2 I6 D" w9 K8 T
  279.                                 //context.fillText(value.toString(), 200, 250)1 @; {0 V* V8 A6 j% Y; b/ G6 d0 v
  280.                                 context.fillText(value2.toString(), point.x, 345)+ p9 A( [/ G1 ~# ?: t: z7 ?/ _
  281. / X8 _. T, p# k  j- R. |  m+ K4 t
  282.                                 context.closePath();
    " x' q* }" w' G6 g5 ^0 e
  283.                         }
    4 K9 Y9 R+ C; C5 X, ?

  284. : a; A. V; h/ X7 w# {
  285. : v2 ^$ h" j$ ?/ R

  286. ! F9 Y5 W0 d- E4 q) e
  287.                         //context.draw();1 n& r9 n8 L( U6 `& z3 @5 N
  288.                 }             w; N4 w7 U9 H- f
  289.            
    , P, f- u  b1 ?! G- O0 y0 m, ?6 W
  290.            
    9 N( B7 A4 J* J9 q
  291.         context.draw();            
    0 `" {8 G) a1 r2 s. H' P
  292.            5 O8 B" O, v; q
  293.         //=================================================== end ========================================================//. f3 X/ H. T4 O8 H
  294. },
复制代码

1 O$ ]$ M8 C- t: N! K' H& H

/ X+ L2 f2 [: A0 }
    经验证,功能正常,至此,目标达成。
7 Q( Z7 V  a$ V5 r: }, U9 g3 D
* }* a( P0 d3 C7 h( X: J$ P
1 X' n. _% c1 _, N; j4 B" F/ o# u' Q7 P
                                    下篇------完善平板电脑UI系统功能

8 w5 S- I' p4 G% Y; m

7 v' E7 [: e* l/ E$ D3 e. Z8 w
  目标:

+ u; L' Q" L! V6 F$ M
        1 将仪表APP加入系统中,面板切换时具有“滑入”效果;
        2 加入滑动解锁功能;
5 P7 j7 \; }: e) a
二、方法:

/ ~! I1 a7 ?9 k, ~
        1 滑动解锁,通过判断Slider控件的值判断滑动的位置,当满足预定要求时
触发跳转函数实现解锁;
        2 本次采用新建页面,设置页面“移动”属性,照搬代码的方式实现APP移植。
% }% e5 M6 r/ {( l8 n0 W' [
三、步骤:

, }4 }+ I  J1 Y3 x2 I
        1 打开“PhotoBrowser”工程,新建页面------page3,按照“上篇------制作
仪表盘APP”的方法添加空间并设置对应属性(注意,先前为横屏,现在改为竖屏),
如下图所示(特别注意:页面属性的设置中添加了“移动”选择):
9 p0 M6 Y& z7 W
11.png

: j3 z( K" `* F  ~1 B
2 将上篇已经编辑好的代码复制到page3.js
5 p1 F# O& W% a, C; k
3 page1中添加一个按钮控件---仪表盘,设置其属性并将事件驱动方法编写如下:

( g, U) g" K9 g' c
onButton2 : function(e) {
         console.dir(e);   
         pm.navigateTo({url:"page3/page3"});                                   
         },

; b, z. N( F# Y# R3 U  W2 e
4 运行程序,触摸“仪表盘”按钮即可跳转到“仪表盘”页面,如下图所示:
! g5 |' Q- ]7 Q8 L3 D3 Y
14.png
9 N- n: }) i, D+ _
12.png
2 ]  z2 j2 O; |
5 调整仪表的坐标,使其适配页面。

6 I& I/ x. ~" |$ _7 Y0 g
6 并编写“返回”按键的驱动方法,代码如下:
! ]4 r; k0 I2 P; d* u6 o
onButtonE : function(e) {
         console.dir(e);         
         pm.navigateBack();      
}

" t/ {8 V7 b# T& Q1 d+ w  @
7 运行程序效果如下

% J2 F" w8 o8 `0 b, x5 F
此为静态图,稍后再贴GIF动图
3 f5 J* S3 }  _, H7 v6 I: r
13.png
" _0 S+ r0 {8 ]. g6 v/ I& d
   至此,仪表APP加入成功,并成功实现了“滑动”“登台”的表演。
下面将为滑动解锁内容。
   
        PS: 突然发现如果要增加滑动解锁功能需要增加一个页面,且页面的
顺序要做“大规模调整”,有没有简便快捷的方法,我目前还未想好,也
就暂且打住,留在下次发帖时再作补充吧。

7 `' s0 v, n# `8 I2 `  h% s* l

( r- P$ J% V/ \& ~; U, H
4 w" u6 L) M8 a( D: x
6 p4 |% q, p% Y5 }1 b/ p
3 w! J& \, W; B( x, f1 m
5 Q/ L6 Z; w; G' O- X
( ]# f6 {  a1 W$ S

! O7 _: v- R! `8 ]- O

( ~3 N$ u2 n8 I9 n9 u, w6 `  k. h
: s6 g3 C. |! ]7 K. |7 u

$ C2 C, B% r+ @% r" J& L
' h: q( b5 J' S7 w/ G, ^  E

& h2 ^4 T; }: S4 V# s
3 x' A2 f6 y; d* g0 K
2 ~7 j2 Q0 s2 y7 d
' V- p$ l" T- g' x7 E+ R
+ ~6 ]* \+ u  P
; {, A0 g3 _5 g8 m$ I; K
6 |0 m9 v6 N+ ^) z

% J0 O" T, t  a2 K1 D
2 I- `' R0 w) V& K# _0 h
# ?' w! W( b. s7 J/ A4 ^3 Z

9 T/ F5 v4 D4 E+ t& F1 q+ [/ N( p

9 K8 U' i& z5 f  g

Photo_Meter.rar

3.47 MB, 下载次数: 370

使用道具 举报 显示全部楼层 回复
最新评论 | 正序浏览
显示全部楼层 |楼层直达:
发表于 2018-9-18 21:23:07 | 显示全部楼层
中间的渐变圆是点睛之笔啊
使用道具 举报 回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|RT-Thread开发者社区 ( 沪ICP备13014002号-1

有害信息举报电话:021-31165890 手机:18930558079

© 2006-2019 上海睿赛德电子科技有限公司

Powered by RT-Thread

快速回复 返回顶部 返回列表