feat: new ui widget canvas

app/src/main/assets/sample/画图/函数图像.js

@@ -1,24 +0,0 @@
-"ui";
-ui.layout(
-    <frame>
-        <canvas id="graphic" w="*" h="*"/>
-    </frame>
-);
-
-var f = function(x){
-    return x * x + 3 * x - 4;
-}
-
-var paint = new Paint();
-paint.setStrokeWidth(2);
-var start = -5;
-var end = 5;
-
-ui.graphic.on("draw", function(canvas){
-    var w = canvas.getWidth();
-    for (var i = 0; i < w; i++) {
-        var x = (end - start) / w * i + start;
-        var y = f(x);
-        canvas.drawPoint(x, y, paint);
-    }
-});

app/src/main/assets/sample/画布/函数图像简单版.js

@@ -0,0 +1,41 @@
+"ui";
+//ui布局为一块画布
+ui.layout(
+    <frame>
+        <canvas id="board" w="*" h="*"/>
+    </frame>
+);
+
+//要绘制的函数，这里是一个一元二次函数
+var f = function(x){
+    return x * x + 3 * x - 4;
+}
+
+//绘制区间
+var minX = -5;
+var maxX = 5;
+var minY = -10;
+
+//画笔
+var paint = new Paint();
+
+ui.board.on("draw", function(canvas){
+    var w = canvas.getWidth();
+    var h = canvas.getHeight();
+    //计算y轴区间上限
+    var maxY = minY + (maxX - minX) * h / w;
+    //设置画笔颜色为黑色
+    paint.setColor(colors.parseColor("#000000"));
+    //绘制两个坐标轴
+    canvas.drawLine(w / 2, 0, w / 2, h, paint);
+    canvas.drawLine(0, h / 2, w, h / 2, paint);
+    //设置画笔颜色为红色
+    paint.setColor(colors.parseColor("#ff0000"));
+    //绘制图像
+    for(var i = 0; i < w; i++){
+        var x = minX + i / w * (maxX - minX);
+        var y = f(x);
+        var j = h - (y - minY) / (maxY - minY) * h;
+        canvas.drawPoint(i, j, paint);
+    }
+});

app/src/main/assets/sample/画布/函数图像高级版.js

@@ -0,0 +1,99 @@
+"ui";
+//ui布局为一块画布和一些函数调整控件
+ui.layout(
+    <vertical>
+        <linear>
+            <input id="fx" textSize="16sp" text="x*x+3*x-4" layout_weight="1"/>
+            <button id="ok" w="50dp"/>
+        </linear>
+        <linear>
+            <button id="left" text="←" layout_weight="1"/>
+            <button id="right" text="→" layout_weight="1"/>
+            <button id="up" text="↓" layout_weight="1"/>
+            <button id="down" text="↑" layout_weight="1"/>
+            <button id="zoom_in" text="+" layout_weight="1"/>
+            <button id="zoom_out" text="-" layout_weight="1"/>
+        </linear>
+        <canvas id="board" w="*" h="*"/>
+    </vertical>
+);
+
+//函数表达式
+var f = "x*x+3*x-4";
+//绘制区间
+var minX = -5;
+var maxX = 5;
+var minY;
+var h = 1;
+var w = 1;
+
+//画笔
+var paint = new Paint();
+paint.setStrokeWidth(2);
+
+ui.board.on("draw", function(canvas){
+    w = canvas.getWidth();
+    h = canvas.getHeight();
+    if(minY == undefined){
+        minY = -(maxX - minX) * h / w / 2;
+    }
+    //计算y轴区间上限
+    var maxY = minY + (maxX - minX) * h / w;
+    //设置画笔颜色为黑色
+    paint.setColor(colors.parseColor("#000000"));
+    //绘制两个坐标轴
+    var x0 = parseInt(- minX / (maxX - minX) * w);
+    canvas.drawLine(x0, 0, x0, h, paint);
+    var y0 = parseInt(h + minY / (maxY - minY) * h);
+    canvas.drawLine(0, y0, w, y0, paint);
+    //设置画笔颜色为红色
+    paint.setColor(colors.parseColor("#ff0000"));
+    //绘制图像
+    for(var i = 0; i < w; i++){
+        var x = minX + i / w * (maxX - minX);
+        var y = eval(f);
+        var j = h - (y - minY) / (maxY - minY) * h;
+        canvas.drawPoint(i, j, paint);
+    }
+});
+
+ui.ok.click(()=>{
+    f = String(ui.fx.text());
+});
+
+ui.left.click(()=>{
+    var d = maxX - minX;
+    maxX -= d / 10;
+    minX -= d / 10;
+});
+
+ui.right.click(()=>{
+    var d = maxX - minX;
+    maxX += d / 10;
+    minX += d / 10;
+});
+
+ui.up.click(()=>{
+    var d = maxX - minX;
+    minY += d / 8;
+});
+
+ui.down.click(()=>{
+    var d = maxX - minX;
+    minY -= d / 8;
+});
+
+ui.zoom_in.click(()=>{
+    var d = maxX - minX;
+    var a = (maxX + minX) / 2;
+    maxX = a + d;
+    minX = a - d;
+
+    minY *= (maxX - minY) / d * h / w;
+});
+
+ui.zoom_out.click(()=>{
+    var d = maxX - minX;
+    maxX -= d / 2;
+    minX += d / 2;
+});