ExtJS-绘图（Drawing）

更新记录
2022年7月28日 发布。
2022年7月26日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

---

PS：不推荐使用ExtJS的绘图功能，实在太丑了。推荐其他开源或者商业的绘图工具包。

---

绘图（Drawing）

说明#

使用ExtJS提供的绘图功能可以实现绘制图形
实际上是在Canvas画布中生成图像

安装方法1-直接引入CSS和JS文件#

此方法适合于直接引入CSS文件和JS文件的项目

将SDK目录下的build目录复制到项目目录下

引入/build/packages/charts包的CSS文件和JS文件即可使用

<link rel="stylesheet" href="/build/packages/charts/classic/neptune/resources/charts-all-debug.css">
<script src="/build/packages/charts/classic/charts-debug.js"></script>

安装方法2-引入charts包#

此方法适合于使用Sencha CMD的项目

打开项目文件夹下的app.json文件

引入charts包

"requires": [
    "font-awesome",
    "charts"
],

编译项目

sencha app build

实例#

绘制圆形（Circle Drawing）#

{
    xtype: 'draw',
    sprites: [{
        type: 'circle',
        fillStyle: 'red',
        r: 100,
        cx: 100,
        cy: 100
    }],
    height:205,
    width:205,
}

绘制矩形（Rectangle Drawing）#

{
    xtype: 'draw',
    sprites: [{
        type: 'rect',
        height : 200,
        width: 600,
        fill: 'red'
    }],
    height:150,
    width:300,
}

绘制扇形（Arc Drawing）#

{
    xtype: 'draw', 
    width: 600,
    height: 400,
    sprites: [{
        type: 'arc',
        cx: 200,
        cy: 200,
        r: 100,
        fillStyle: '#1F6D91',
        startAngle: 0,
        endAngle: Math.PI,
        anticlockwise: true
    }]
}

绘制椭圆（Ellipse Drawing）#

{
    xtype: 'draw', 
    renderTo: Ext.getBody(),
    width: 600,
    height: 200,
    
    sprites: [{
        type: 'ellipse',
        cx: 100,
        cy: 100,
        rx: 80,
        ry: 50,
        fillStyle: '#1F6D91'
    }]
}

绘制椭圆扇形（Elliptical Arc Drawing）#

{
    xtype: 'draw', 
    renderTo: Ext.getBody(),
    width: 600,
    height: 200,
    sprites: [{
        type: 'ellipticalArc',
        cx: 100,
        cy: 100,
        rx: 80,
        ry: 50,
        fillStyle: '#1F6D91',
        startAngle: 0,
        endAngle: Math.PI,
        anticlockwise: true
    }]
}

绘制图片（Image Drawing）#

{
    xtype: 'draw',
    renderTo: Ext.getBody(),
    width: 600,
    height: 200,
    
    sprites: [{
        type: 'image',
        src : '/resources/images/2021-01-20_111540.jpg'
    }]
}

绘制正方形（Square Drawing）#

{
    xtype: 'draw',
    width: 300,
    height: 300,
    
    sprites: [{
        type: 'square',
        height: 200,
        width: 250,
        fill: 'green'
    }]
}

旋转图形（Rotate Drawing）#

{
    xtype: 'draw',
    width: 200,
    height: 200,
    sprites: [{
        type: 'rect',
        height: 100,
        width: 100,
        x:50,
        y:50,
        fill: 'red',
        rotate: {
            degrees: 45
        }
    }],
}

指定起始绘制位置（Translate Drawing）#

{
    xtype: 'draw',
    width: 400,
    height: 400,
    sprites: [{
        type: 'rect',
        height : 200,
        width: 200,
        fill: 'red',
        translate: {
            x:10,
            y:10
        }
    }],
}

绘制文本（Text Drawing）#

{
    xtype: 'draw',
    width: 600,
    height: 200,
    sprites: [{
        type: 'text',
        x: 200,
        y: 100,
        text: 'panda666.com',
        fontSize: 30,
        fillStyle: 'red'
    }]
}

绘制自定义点图#

{
    xtype: 'draw',
    width: 300,
    height:200,
    sprites: [{
        type: 'path',
        path: 'M150 0 L25 100 L250 100 Z',
        strokeStyle: '#333',
        fill: 'green',
        lineWidth: 2
    }]
}