1.实现文本绘图
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.2|extjs4中Ext.draw.Component 绘图实例介绍
http://m.bbyears.com/wangyezhizuo/33110.html
推荐访问:extjs4api