Canvas

画布组件，可用于绘制一些自定义图形，如：线段、矩形、圆形、椭圆、图片、文本等，从而实现复杂图形的展示。

样式

属性

支持通用视图属性。Canvas 组件自身相关的属性均是以方法调用的形式来进行设置的，详见下面方法部分。

方法

/**
 * 设置stroke的线粗细
 * @param widthValue 粗细值，支持px，hm 单位， 如果不写单位就是dp
 */
lineWidth(widthValue: number) => void);

/**
 * 设置stroke的颜色
 * @param colorHex 颜色16进制
 */
lineColor(colorHex: string) => void);

/**
 * 设置线头样式
 * @param value 0:LineCapButt, ， 1:LineCapRound   2:LineCapSquare
 */
lineCap(value: number) => void);

/**
 * 设置折线折点样式
 * @param value 0:LineJoinMiter, ， 1:LineJoinRound  2:LineJoinBevel
 */
lineJoin(value: number) => void);

/**
 * 根据入参，在起始点与终点之间画一条线段
 * @param fromX 起点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param fromY 起点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param toX 终点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param toY 终点的y值，支持px，hm 单位， 如果不写单位就是dp
 */
drawLine(fraomX: number, fromY: number, toX: number, toY: number) => void);

/**
 * 画矩形
 * @param x 矩形左上角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 矩形左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param w 矩形宽，支持px，hm 单位， 如果不写单位就是dp
 * @param h 矩形高，支持px，hm 单位， 如果不写单位就是dp
 */
strokeRect(x: number, y: number, w: number, h: number) => void);

/**
 * 画椭圆
 * @param x 椭圆所在矩形左上角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 椭圆所在矩形左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param trailX 椭圆所在矩形右下角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param trailY 椭圆所在矩形右下角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 */
strokeEllipse(x: number, y: number, trailX: number, trailY: number) => void);

/**
 * 画圆形
 * @param x 圆心坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 圆心坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param raduis 半径 ， 支持px，hm 单位， 如果不写单位就是dp
 */
strokeCircle(x: number, y: number, radius: number) => void);

/**
 * 画弧形
 * @param x 圆心坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 圆心坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param raduis 半径 ， 支持px，hm 单位， 如果不写单位就是dp
 * @param startAngle 起始弧度 ， 
 * @param endAngle 结束弧度 ，
 * @param clockwise ture 顺时针 ， false 逆时针
 */
arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, clockwise: boolean) => void);

/**
 * 设置填充颜色
 * @param colorHex 颜色16进制
 */
fillColor(colorHex: string) => void);

/**
 * 填充矩形
 * @param x 矩形左上角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 矩形左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param w 矩形宽，支持px，hm 单位， 如果不写单位就是dp
 * @param h 矩形高，支持px，hm 单位， 如果不写单位就是dp
 */
fillRect(x: number, y: number, w: number, h: number) => void);

/**
 * 填充椭圆
 * @param x 椭圆所在矩形左上角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 椭圆所在矩形左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param trailX 椭圆所在矩形右下角坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param trailY 椭圆所在矩形右下角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 */
fillEllipse(x: number, y: number, trailX: number, trailY: number) => void);

/**
 * 填充圆形
 * @param x 圆心坐标点的x值，支持px，hm 单位， 如果不写单位就是dp
 * @param y 圆心坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param raduis 半径 ， 支持px，hm 单位， 如果不写单位就是dp
 */
fillCircle(x: number, y: number, radius: number) => void);

/**
 * 设置绘制文本字号
 * @param size 字号大小
 */
fontSize(size: number) => void);

/**
 * 设置绘制文本字色
 * @param colorHex 字体颜色 16进制色号
 */
textColor(colorHex: string) => void);

/**
 * 绘制文本
 * @param text 需要绘制的文本
 * @param x 文本左上角坐标x值 , 支持px，hm 单位， 如果不写单位就是dp
 * @param y 文本左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param maxWidth 文本换行的最大宽度, 0 代表不换行,支持px，hm 单位， 如果不写单位就是dp
 */
fillText(text: string, x: number, y: number, maxWidth: number) => void);

/**
 * 绘制图片
 * @param src 图片资源链接,远程url或本地图片名
 * @param x 图片左上角坐标x值 , 支持px，hm 单位， 如果不写单位就是dp
 * @param y 图片左上角坐标点的y值，支持px，hm 单位， 如果不写单位就是dp
 * @param width 图片宽 ,支持px，hm 单位， 如果不写单位就是dp
 * @param height 图片高 ,支持px，hm 单位， 如果不写单位就是dp
 */
drawImage(src: string, x: number, y: number, width: number, height: number) => void);

示例

let canvas = new CanvasView()
canvas.lineWidth(2.0)
canvas.style = {
    marginTop: 10,
}
this.drawRect(canvas)
this.drawLines(width, height, canvas)
this.drawText(width, height, canvas)
this.drawCircle(width, height, canvas)
this.drawImage(width, height, canvas)
this.appendChild(canvas);
        

drawRect(canvas) {
    //开盘
    let data1 = [85, 135, 60, 131, 151, 153, 88, 117]
    //收盘
    let data2 = [52, 68, 123, 152, 145, 98, 158, 52]
    //最高
    let data3 = [152, 141, 124, 163, 152, 161, 159, 192]
    //最低
    let data4 = [39, 53, 39, 88, 141, 41, 82, 49]

    let width_half = 5
    let space = 15
    // canvas.lineColor("#FF0000")
    // canvas.fillRect(80, 300, space * 2, 150)
    // canvas.drawLine(100, 170, 100, 490)
    let start_w = 20
    for (let i = 0; i < data1.length; i++) {
        let d1 = data1[i]
        let d2 = data2[i]
        let d3 = data3[i]
        let d4 = data4[i]

        if (d2 >= d1) {
            canvas.lineColor("#FF0000")
            canvas.strokeRect(start_w, d1, width_half * 2, d2 - d1)
            canvas.lineColor("#FF0000")
            canvas.drawLine(start_w + width_half, d3, start_w + width_half, d4)
        } else {
            canvas.fillColor("#00FF00")
            canvas.fillRect(start_w, d2, width_half * 2, d1 - d2)
            canvas.lineColor("#00FF00")
            canvas.drawLine(start_w + width_half, d3, start_w + width_half, d4)
        }

        start_w = start_w + width_half * 2 + space
    }
}

drawText(width, height, canvas) {
    let start_w = 1
    canvas.fontSize(8)
    canvas.fillText("200", start_w, 200 - 10, 40)
    canvas.fillText("150", start_w, 150 - 10, 40)
    canvas.fillText("100", start_w, 100 - 10, 40)
    canvas.fillText("50", start_w, 50 - 10, 40)

    let data = ["8.1", "8.2", "8.3", "8.4", "8.5", "8.6", "8.7", "8.8"]
    let width_half = 5
    let space = 15
    let height_bottom = 200
    start_w = 20
    canvas.fontSize(10)
    canvas.textColor("#0000FF")
    for (let i = 0; i < data.length; i++) {
        canvas.fillText(data[i], start_w, height_bottom, (width_half * 2 + space / 2))
        start_w += (width_half * 2 + space)
    }
}

drawLines(width, height, canvas) {
    this.drawLinesWithNormal(width, height, canvas)
    // this.drawLinesWithPath(width, height, canvas)
}

drawLinesWithNormal(width, height, canvas) {
    let start_line = 15
    let data = [22, 33, 30, 31, 28, 52, 51, 60, 43, 62, 13, 38, 32, 38, 20, 45, 33, 35, 20];
    let space = (width - start_line * 2) / data.length
    canvas.lineColor("#FF00FF")
    //轴
    canvas.drawLine(start_line, 0, start_line, 200)
    canvas.drawLine(start_line, 200, width - start_line, 200)

    let x = start_line
    let y = 100;
    //数据
    for (let i = 0; i < data.length; i++) {

        let n_x = x + space;
        let n_y = data[i]
        canvas.drawLine(x, y, n_x, n_y)
        x = n_x
        y = n_y
    }
}

drawImage(width, height, canvas) {
    //资源图片
    // let path = "ic_loading"
    //网络图片
    let path = "http://xxx/test.jpg"
    //绝对路径
    // let path = "file://xxx/test.jpg"
    canvas.drawImage(path, 180, 330, 50, 50)

}

drawCircle(width, height, canvas) {
    canvas.fillCircle(100, 300, 20)
    canvas.strokeCircle(200, 300, 20)
    canvas.arc(300, 300, 20, Math.PI/2, Math.PI, true)
    canvas.strokeEllipse(100, 400, 300, 500)
    canvas.fillEllipse(100, 600, 300, 700)
}

Canvas ​

样式 ​

属性 ​

方法 ​

示例 ​

Canvas

样式

属性

方法

示例