文档帮助

内容

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和过滤器 API 文档类元数据 展开和折叠示例和类成员 桌面 -vs- 移动视图 查看类源代码

术语、图标和标签

许多类在使用配置对象创建（实例化）类时使用快捷名称。快捷名称被称为别名（如果类扩展了 Ext.Component，则为xtype）。别名/xtype 列在适用类的类名旁边，以便快速参考。

访问级别

框架类或其成员可以指定为private或protected。否则，该类/成员为public。Public、protected和private是访问描述符，用于传达如何以及何时使用该类或类成员。

成员类型

成员语法

以下是一个示例类成员，我们可以对其进行分析以显示类成员的语法（在本例中为从 Ext.button.Button 类中看到的 lookupComponent 方法）。

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
protected

当在items配置的初始化期间或添加新项目时，将原始配置对象添加到此容器时调用added), or {@link #insert inserted.

此方法将传递的对象转换为实例化的子组件。

当需要对子项创建应用特殊处理时，可以在子类中覆盖此方法。

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看一下成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 单例框架类。*有关更多信息，请参阅单例标志。

- 组件类型框架类（Ext JS 框架中扩展 Ext.Component 的任何类）

- 表示类、成员或指南在当前查看的版本中是新的。

成员图标

- 表示类型为 config 的类成员

- 表示类型为 property 的类成员

- 表示类型为 method 的类成员

- 表示类型为 event 的类成员

- 表示类型为 theme variable 的类成员

- 表示类型为 theme mixin 的类成员

- 表示类、成员或指南在当前查看的版本中是新的。

类成员快速导航菜单

在 API 文档页面上的类名下方，有一排按钮，对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量（此数量会随着应用过滤器而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单，其中包含该类型的所有成员，以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，位于它们所操作的配置下方。Getter 和 Setter 方法文档将在配置行中找到，以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中，并在顶部标题栏下方（使用可用的空间）显示。默认情况下，仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的历史记录栏中的所有最近页面。

在历史记录配置菜单中，您还会看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择了“全部”，则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将鼠标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上，还有一个过滤器输入字段，该字段使用过滤器字符串过滤成员行。除了按字符串过滤外，您还可以按访问级别、继承和只读过滤类成员。这是使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表，以包含或排除私有类。

单击空的搜索字段将显示您最近的 10 次搜索，以便快速导航。

API 文档类元数据

每个 API 文档页面（除了 Javascript 原语页面）都具有与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项

展开和折叠示例和类成员

默认情况下，可运行示例（Fiddle）会在页面上展开。您可以使用代码块左上角的箭头，单独折叠和展开示例代码块。您也可以使用页面右上角的切换按钮，切换所有示例的折叠状态。切换所有状态将在页面加载之间保留。

默认情况下，类成员在页面上会折叠。您可以使用成员行左侧的箭头图标，或使用右上角的展开/折叠所有切换按钮，展开和折叠成员。

桌面与移动视图

在较窄的屏幕或浏览器上查看文档，将显示针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Ext JS 7.8.0


顶部

内容

绘制容器 绘制表面 精灵 使用 SVG 路径绘制 平移 旋转 缩放 与精灵交互

绘制包简介

绘制包使您能够绘制通用图形和动画。这些创作可以与图表类和其他界面一起使用，以创建适用于所有浏览器和移动设备的图形。本指南将向您介绍绘制包的基本原理。

绘制容器

绘制容器是一个可以渲染精灵的表面。绘制容器管理并保存一个表面实例。根据浏览器，此界面具有 SVG 或 Canvas 实现，可以在其中追加精灵。

绘制表面

您可以创建一个简单的绘制表面，而无需加载图表包。这使您能够创建适用于所有浏览器/设备并能很好地进行动画处理的任意图形。例如，您可以创建一个美国交互式地图，其中每个州都是一个精灵，或者创建一个每个元素也是一个精灵的信息图表。精灵为您提供了一种有效的方式来创建具有有用交互性的图像。此外，由于图像基于 Canvas 和 SVG，因此在调整大小或缩放时不会损失质量。这确保它们始终看起来“正确”，并且始终以 100% 的精度正确打印。

为了直接使用绘制包，您需要创建一个绘制容器。

Ext.create('Ext.draw.Container', {
    sprites: [{
        type: 'circle',
        fillStyle: 'red',
        r: 100,
        cx: 100,
        cy: 100
    }],
    height:205,
    width:205,
    renderTo:Ext.getBody()
});

在本例中，我们向 Draw 容器添加了一个精灵。精灵的类型是圆形，因此如果您运行此代码，您将在浏览器中看到一个红色的圆形。

您也可以使用表面的 add 方法添加精灵。

var main = Ext.create('Ext.draw.Container', {
    height:500,
    width: 500,
    renderTo:Ext.getBody()
});

main.getSurface().add({
    type: 'circle',
    fillStyle: 'red',
    r: 100,
    cx: 100,
    cy: 100
});    

main.renderFrame();

注意：对表面的添加和删除不会立即显示。您必须强制重新渲染表面才能实现您的修改。这就是我们在上面使用 renderFrame() 的原因。

精灵

精灵是在绘图表面中渲染的对象。它们被添加到 getItems() 集合中的表面中。Ext.draw.sprite.Sprite 是一个抽象类，不应直接使用。相反，请使用下面列出的标准精灵子类。

精灵的配置是一个具有以下属性的对象。

  • type - (String) 精灵的类型。可能的选项是 'circle'、'path'、'rect'、'text'、'square'。
  • width - (Number) 用于矩形精灵，矩形的宽度。
  • height - (Number) 用于矩形精灵，矩形的高度。
  • size - (Number) 用于正方形精灵，正方形的尺寸。
  • radius - (Number) 用于圆形精灵，圆形的半径。
  • x - (Number) 沿 x 轴的位置。
  • y - (Number) 沿 y 轴的位置。
  • path - (Array) 用于路径精灵，以类似 SVG 路径语法编写的精灵路径。
  • opacity - (Number) 精灵的不透明度。
  • fill - (String) 填充颜色。
  • stroke - (String) 描边颜色。
  • stroke-width - (Number) 描边的宽度。
  • font - (String) 用于文本类型精灵。完整的字体描述。使用与 CSS font 参数相同的语法。
  • text - (String) 用于文本类型精灵。文本本身。

此外，还有三个可以使用 setAttributes 设置的变换对象。这些变换对象是 translate、rotate 和 scale。

使用 SVG 路径绘图

如上所述，精灵项接受一个 path 值，用于创建可能超出我们预定义精灵类型复杂性的自定义精灵。您可以使用特殊的 SVG 路径语法来“描述”绘图路径。以下是 SVG 路径命令。

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

注意：大写字母表示该项目应绝对定位。使用小写字母进行相对定位。

Ext.create('Ext.draw.Container', {
    renderTo: Ext.getBody(),
    width: 300,
    height:200,
    sprites: [{
        type: 'path',
        path: 'M150 0 L25 100 L300 100 Z',
        strokeStyle: '#333',
        fill: '#999',
        lineWidth: 2
    }]
});

您可以看到上面的路径创建了一个三角形。

M150 0 L25 100 L300 100 Z

这表示为

  • M150 0 - 在 x 轴上从起点移动 150 像素，同时保持在 y 轴上的 0。这使得我们的原点为 (150,0)。
  • L25 100 - 从起点 (150,0) 绘制一条线到 (25,100)
  • L300 100 - 从最后一个点 (25,100) 绘制一条线到 (300,100)
  • Z - 通过从最后一个点 (300,100) 绘制一条线到原点 (150,0) 来关闭路径。

平移

平移可用于在精灵渲染后对其进行定位。此配置对象包含用于平移的 x 和 y 属性。例如

var main = Ext.create('Ext.draw.Container', {
    height:205,
    width:205,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        translate: {
            x:10,
            y:10
        }
    }], 
    renderTo:Ext.getBody()
});

旋转

旋转可用于旋转精灵。配置对象包含用于旋转中心的 x 和 y 属性（可选），以及一个指定旋转角度（以度为单位）的 degrees 属性。例如

var main = Ext.create('Ext.draw.Container', {
    height:205,
    width:205,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        rotate: {
            degrees: 45
        }
    }], 
    renderTo:Ext.getBody()
});

缩放

缩放可用于动态调整精灵的大小。对于缩放，配置对象包含用于 x 轴和 y 轴缩放的 x 和 y 属性。例如

var main = Ext.create('Ext.draw.Container', {
    height:305,
    width:305,
    sprites: [{
        type: 'rect',
        fillStyle: 'red',
        width: 100,
        height:100,
        scale: {
            x: 3,
            y: 3
        }
    }], 
    renderTo:Ext.getBody()
});

与精灵交互

现在我们已经创建了一个包含精灵的绘图表面，让我们深入了解精灵交互。在将精灵添加到表面后，我们可以获取对该精灵的引用

var main = Ext.create('Ext.draw.Container', {
    sprites: [{
        type: 'rect',
        width: 100,
        height: 100,
        fillStyle: 'red'
    }],
    height:205,
    width:205,
    renderTo:Ext.getBody(),
    listeners: {
        afterrender: function(me){
            var surface = me.getSurface(),
                sprite = surface.getItems()[0];

            sprite.setAttributes({
                fillStyle:'black'
            });

            Ext.create('Ext.fx.Anim', {
                target: surface,
                duration: 8000,
                to: {
                    opacity: .5
                }
            });                  
        }
    }
});

在上面的示例中，您可以看到如何使用 draw 包设置精灵属性并对这些属性进行动画处理。

如您所见，此包为我们创建的图形提供了通用的抽象。这个类最有趣的地方在于我们不受特定形状或结构的限制。此外，所有元素都支持设置属性和创建动画。最重要的是，所有这些都与所有浏览器和设备兼容。

Ext JS 7.8.0