rexseeJavaView之SurfaceView
返回手册目录
【说明】rexseeJavaView之SurfaceView使开发者可以进行3D绘图。
【类型说明】用于绘图的视图,用rexseeJavaView.create(id,"SurfaceView",style)创建。
【setValue】
【getValue】
【特有函数】void draw(String id, final String commands, boolean anotherThread):id是SurfaceView的ID,anotherThread是指在其它线程中异步绘图还是在本线程中同步绘图。commands是多个命令的集合,不同的命令用“|”分隔,每个命令是一个样式表,其中的"command"属性是命令类型,每个命令类型使用不同的其它样式作为参数。
【特有事件】onJavaSurfaceChanged(String id, String status, String format, int width, int height)
【画笔样式】 在绘图过程中,大多数绘图命令都会用到画笔样式,以下是画笔样式的说明:
  • format:"fill"、"stroke"或"fileandstroke"。
  • color:颜色。
  • alpha:透明度。
  • antialias
  • dither
  • filterbitmap
  • 覆盖模式:
  • mode:在绘制颜色时支持ADD、CLEAR、DARKEN、DST、DST_ATOP、DST_IN、DST_OUT、DST_OVER、LIGHTEN、MULTIPLY、OVERLAY、SCREEN、SRC、SRC_ATOP、SRC_IN、SRC_OUT、SRC_OVER或XOR,默认为SRC。在绘制图形时,除以上模式外,还支持NONE、AVOID、TARGET、PIXELXOR,默认为NONE。
  • op_color:当mode为AVOID时,表示避免在底层图形的该颜色上绘图;当mode为TARGET时,表示仅在底层图形的该颜色上绘图;当mode为PIXELXOR表示该颜色将和新颜色、原颜色进行XOR运算。
  • tolerance:当mode为AVOID或TARGET时,表示对op-color的容错度,最小0,最大255。
  • 文字样式:
  • font_size
  • font_weight
  • text_decoration
  • text_align
  • text_shadow_radius
  • text_shadow_dx
  • text_shadow_dy
  • text_shadow_color
  • text-scalex
  • text-skewx
  • text-linear
  • text-subpixel
  • 线条样式:
  • stroke_width
  • stroke_style
  • stroke_cap
  • stroke_join
  • stroke_join_meter
【特有样式】根据命令不同,用到的样式也不同,参看下面的详细说明。

SurfaceView代码 显示SurfaceView 隐藏SurfaceView
以下是命令详解:
【命令】color
【说明】为整个画布填充颜色。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:red;',true);
运行示例

【命令】point
【说明】绘制点。
【参数】 x:点的水平坐标。
y:点的垂直坐标。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:point;color:white;x:100;y:100;|command:point;color:white;x:101;y:100;|command:point;color:white;x:100;y:101;|command:point;color:white;x:101;y:101;',true);
运行示例

【命令】line
【说明】绘制直线。
【参数】 x:起点的水平坐标。
y:起点的垂直坐标。
x2:终点的水平坐标。
y2:终点的垂直坐标。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:line;color:white;x:0;y:0;x2:100;y2:100;stroke-width:10;stroke-style:dash;',true);
运行示例

【命令】rect
【说明】绘制矩形。
【参数】 x:左上角的水平坐标。
y:左上角的垂直坐标。
x2:右下角的水平坐标。
y2:右下角的垂直坐标。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:rect;color:white;x:10;y:10;x2:100;y2:100;format:stroke;stroke-width:3;stroke-style:dot;',true);
运行示例

【命令】roundrect
【说明】绘制圆角矩形。
【参数】 x:左上角的水平坐标。
y:左上角的垂直坐标。
x2:右下角的水平坐标。
y2:右下角的垂直坐标。
round-x-radius:圆角水平半径。
round-y-radius:圆角垂直半径。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:roundrect;round-x-radius:10;round-y-radius:10;color:white;x:10;y:10;x2:100;y2:100;',true);
运行示例

【命令】cycle
【说明】绘制圆形。
【参数】 x:圆心的水平坐标。
y:圆心的垂直坐标。
radius:半径。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:cycle;color:white;x:120;y:120;radius:50;format:stroke;stroke-width:3;stroke-style:dash;',true);
运行示例

【命令】oval
【说明】绘制椭圆形。
【参数】 x:容器矩形左上角的水平坐标。
y:容器矩形左上角的垂直坐标。
x2:容器矩形右下角的水平坐标。
y2:容器矩形右下角的垂直坐标。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:oval;color:white;x:20;y:20;x2:150;y2:100;format:stroke;stroke-width:3;stroke-style:longdash;',true);
运行示例

【命令】arc
【说明】绘制椭圆形上的一段弧线。
【参数】 x:容器矩形左上角的水平坐标。
y:容器矩形左上角的垂直坐标。
x2:容器矩形右下角的水平坐标。
y2:容器矩形右下角的垂直坐标。
from:弧线的起始角度。
to:弧线的终止角度。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:arc;color:white;x:20;y:20;x2:150;y2:100;format:stroke;stroke-width:3;stroke-style:dotlongdash;from:45;to:315;',true);
运行示例

【命令】wedge
【说明】绘制椭圆形上的一段扇形。
【参数】 x:容器矩形左上角的水平坐标。
y:容器矩形左上角的垂直坐标。
x2:容器矩形右下角的水平坐标。
y2:容器矩形右下角的垂直坐标。
from:扇形的起始角度。
to:扇形的终止角度。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:wedge;color:white;x:20;y:20;x2:150;y2:100;format:stroke;from:45;to:315;',true);
运行示例

【命令】text
【说明】绘制一段文字。
【参数】 x:文字起点左上角的水平坐标。
y:文字起点左上角的垂直坐标。
text:文字。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:text;color:white;x:50;y:100;text:这是一段文字;font-size:24px;',true);
运行示例

【命令】textonarc
【说明】在椭圆形上一段弧线上绘制文字。
【参数】 x:容器矩形左上角的水平坐标。
y:容器矩形左上角的垂直坐标。
x2:容器矩形右下角的水平坐标。
y2:容器矩形右下角的垂直坐标。
from:弧线的起始角度。
to:弧线的终止角度。
text:文字。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:textonarc;color:white;x:20;y:100;x2:150;y2:200;format:fill;from:225;to:315;text:这是一段文字;font-size:24px;',true);
运行示例

【命令】bitmap
【说明】绘制一幅图片。
【参数】 x:绘图区域左上角的水平坐标。
y:绘图区域左上角的垂直坐标。
x2:绘图区域右下角的水平坐标。
y2:绘图区域右下角的垂直坐标。
x3:图片区域左上角的水平坐标。
y3:图片区域左上角的垂直坐标。
x4:图片区域右下角的水平坐标。
y4:图片区域右下角的垂直坐标。
path:图片路径,可以http://xxx、file:///xxx或drawable://xxx等。
画笔样式。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:bitmap;x:50;y:100;x2:150;y2:200;x3:0;y3:0;x4:150;y4:150;path:file:///android_asset/touchBall.png;',true);
运行示例

【命令】skew
【说明】设置倾斜,对以后的绘图都有效,直到下次调用rexseematrix。
【参数】 x:水平倾斜。
y:垂直倾斜。
x2:原点的水平坐标。
y2:原点的垂直坐标。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:skew;x:0.1;y:0.1;x2:100;y2:150;|command:bitmap;x:50;y:100;x2:150;y2:200;path:file:///android_asset/touchBall.png;',true);
运行示例

【命令】scale
【说明】设置缩放,对以后的绘图都有效,直到下次调用rexseematrix。
【参数】 x:水平缩放。
y:垂直缩放。
x2:原点的水平坐标。
y2:原点的垂直坐标。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:scale;x:1;y:1.5;x2:100;y2:150;|command:bitmap;x:50;y:100;x2:150;y2:200;path:file:///android_asset/touchBall.png;',true);
运行示例

【命令】translate
【说明】设置平移,对以后的绘图都有效,直到下次调用rexseematrix。
【参数】 x:水平移动。
y:垂直移动。
z:Z轴的移动。
x2:Z轴移动时原点的水平坐标。
y2:Z轴移动时原点的垂直坐标。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:translate;x:0;y:0;z:-100;x2:100;y2:150;|command:bitmap;x:50;y:100;x2:150;y2:200;path:file:///android_asset/touchBall.png;',true);
运行示例

【命令】rotate
【说明】设置旋转,对以后的绘图都有效,直到下次调用rexseematrix。
【参数】 x:水平旋转。
y:垂直旋转。
z:Z轴的旋转。
x2:原点的水平坐标。
y2:原点的垂直坐标。
z2:原点的Z轴坐标。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:rotate;x:45;y:45;z:45;x2:100;y2:125;z2:0;|command:rect;x:50;y:100;x2:150;y2:150;format:stroke;stroke-width:3;',true);
运行示例

【命令】matrix
【说明】手动设置变形。
【参数】 x:水平缩放。
y:水平倾斜。
z:水平移动。
x2:垂直倾斜。
y2:垂直缩放。
z2:垂直移动。
x3: MPERSP_0。
y3: MPERSP_1。
z3: MPERSP_2。
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:matrix;x:2;y:0;z:0;x2:0;y2:2;z2:-175;x3:0;y3:0;z3:1;|command:rect;x:50;y:100;x2:150;y2:150;format:stroke;stroke-width:3;',true);
运行示例

【命令】resetmatrix
【说明】取消所有变形。
【参数】
【示例】
rexseeJavaView.draw('surfaceView','command:color;color:transparent;|command:rotate;x:45;y:45;z:45;x2:100;y2:125;z2:0;|command:resetmatrix;|command:rect;x:50;y:100;x2:150;y2:150;format:stroke;stroke-width:3;',true);
运行示例


【综合示例】 示例代码 运行示例
返回手册目录