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

【www.bbyears.com--extjs】

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

效果如下：

本文来源：http://www.bbyears.com/wangyezhizuo/33110.html