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
}]
}
本文来自博客园,作者:重庆熊猫,转载请注明原文链接:https://www.cnblogs.com/cqpanda/p/16519518.html