Canvas标签

1
<?xml version="1.0" encoding="utf-8"?>
2

3
    <LinearLayout
4
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5
        xmlns:android="http://schemas.android.com/apk/res/android" xsi:noNamespaceSchemaLocation="layout.xsd"
6
        android:layout_height="match_parent" android:layout_width="match_parent"
7
                  android:background="#336699"
8
                  android:orientation="vertical" android:padding="20dp">
9

10

11

12
            <Canvas  android:tag="ca" android:cornerRadius="24dp"
13
                    android:background="#88000000" android:textColor="#ffffff" android:layout_width="match_parent"/>
14

15

16
    </LinearLayout>

1
//绘制区间
2
var minX = -5;
3
var maxX = 5;
4
var minY = -10;
5

6
//画笔
7
var paint = new android.graphics.Paint();
8
//要绘制的函数，这里是一个一元二次函数
9
var f = function (x) {
10
    return x * x + 3 * x - 4;
11
}
12

13
function main() {
14
    ui.layout("ddd", "f.xml")
15
    logd(ui.ca);
16

17
    ui.ca.onDraw(function (canvas) {
18
        logd("==> " + canvas);
19
        var w = canvas.getWidth();
20
        var h = canvas.getHeight();
21
        //计算y轴区间上限
22
        var maxY = minY + (maxX - minX) * h / w;
23
        //设置画笔颜色为黑色
24
        paint.setColor(android.graphics.Color.parseColor("#000000"));
25
        //绘制两个坐标轴
26
        canvas.drawLine(w / 2, 0, w / 2, h, paint);
27
        canvas.drawLine(0, h / 2, w, h / 2, paint);
28
        //设置画笔颜色为红色
29
        paint.setColor(android.graphics.Color.parseColor("#ff0000"));
30
        //绘制图像
31
        for (var i = 0; i < w; i++) {
32
            var x = minX + i / w * (maxX - minX);
33
            var y = f(x);
34
            var j = h - (y - minY) / (maxY - minY) * h;
35
            canvas.drawPoint(i, j, paint);
36
        }
37
    })
38
}
39

40
main();