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();

效果如下：

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程