一聚教程网:一个值得你收藏的教程网站

热门教程

extjs4中Ext.draw.Component 绘图实例介绍

时间:2022-06-25 18:29:59 编辑:袖梨 来源:一聚教程网


1.实现文本绘图

 代码如下 复制代码
[Js]
        Ext.create('Ext.draw.Component', {
            renderTo: Ext.getBody(),
            viewBox: false,
            draggable: {
                constrain: true,                    //允许拖动
                constrainTo: Ext.getBody()
            },
            floating: true,
            autoSize: true,
            items: [{
                type: 'text',
                text: '图形化的文本',
                fill: 'green',
                font: '16px Arial',
                rotate: {
                    degrees: 45
                }
            }]
        });


通过上面的代码,我们可以展示出图片式文本,效果如下:

2.基本图形,路径绘图
我们先通过基本图形绘制一个圆形,一个长方形,最后通过路径语法绘制一个等腰三角形:

 代码如下 复制代码

[Js]
    var drawComponent = Ext.create('Ext.draw.Component', {
        viewBox: false,
        items: [{
            type: 'circle',                     //园
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }, {
            type: 'rect',                       //矩形
            width: 50,
            height: 30,
            fill: '#f00',
            x: 0,
            y: 0
        }, {
            type: "path",
            path: "M100 0 L150 50 L200 0 Z",    //路径
            "stroke-width": "1",
            stroke: "#000",
            fill: "blue"
        }]
    });

    Ext.create('Ext.Window', {
        width: 230,
        height: 250,
        layout: 'fit',
        items: [drawComponent]
    }).show();


效果如下:

热门栏目