Ext JS 7.8.0

显示私有类

使用 Sencha Ext JS 创建精美图像 - 第 1 部分

你们中的许多人可能熟悉 Sencha Charting 包，该包随 Sencha Ext JS 一起提供。它允许您快速创建出色的可视化效果，例如 3D 柱状图或 3D 饼图。但是，对于您的 Web 应用程序来说，图表通常是不够的，您可能需要在您的应用程序中创建流程图、座位图、示意图，甚至交互式动画。

image alt text

当然，您可以直接使用 HTML5 Canvas 或 SVG，但这些通常会导致跨平台兼容性问题。处理浏览器问题、常规与 Retina 显示器之间的差异、动画等并非易事。您也可能能够使用第三方库，这些库支持多个渲染器并提供一些有用的抽象，但很快，您会发现自己花费时间处理跨库的集成问题。

Ext JS Charts 附带一个绘图包，允许您创建任意图形和动画，而无需担心特定浏览器使用哪种技术进行渲染。它根据您的浏览器自动选择最合适的渲染器（Canvas、SVG 或 VML）。在底层，绘图包遵循 HTML5 Canvas 作为底层 API 模型。Canvas API 调用会自动转换为 SVG 或 VML（如果需要）。

让我们探索绘图包的许多功能以及它们是如何实现的，同时您告别跨浏览器兼容性问题！

一个简单的精灵

精灵是表示可以绘制的图形对象的基本图元。您可以通过组合多个精灵来创建所需的图像。绘图包中提供了多种精灵。每种精灵类型都有各种属性，这些属性定义了应如何表示它。例如，这是一个矩形精灵

{    
    xtype: 'draw',
    width: 250,
    height: 250,
    sprites: [{
        type: 'rect',
        x: 50,
        y: 50,
        width: 100,
        height: 100,
        lineWidth: 4,
        strokeStyle: 'green',
        fillStyle: 'yellow'
    }]

}

image alt text

在 Fiddle 中打开

这里的“type: 'rect'”与精灵的别名相对应，其余的配置属性是精灵属性。重要的是要注意，精灵属性不是配置。您将在本系列的后面部分中了解有关属性和配置之间差异的更多信息。现在，我们只说它们的处理和使用方式不同。

绘制容器

上一个示例中包含的 ‘draw’ xtype 与 Ext.draw.Container 类相对应。这是绘制表面的容器（Ext.draw.Surface 的实例），精灵在其中渲染。

请注意，我们使用了 ‘sprites’ 配置，而不是绘制容器的 ‘items’ 配置来向其添加 ‘rect’ 精灵。这是因为绘制容器的 ‘items’ 是其表面。在 ‘sprites’ 配置中定义的精灵进入默认的 ‘main’ 表面。如果您使用精灵的 ‘surface’ 配置（不是属性），您可以使精灵进入默认表面以外的表面。例如

{
    type: 'rect',
    surface: 'privateSurface',    
    x: 50,
    y: 50,
    width: 100,  
    height: 100, 
    ...
}

以上代码将创建一个 ID 为 ‘privateSurface’ 的表面，并且 rect 精灵将放置在内部，而不是默认的 ‘main’ 表面。“surface”配置也可以是实际的表面实例，这意味着您将在绘制容器实例化后通过 “setSprites” 方法添加精灵。

注意： ‘setSprites’ 不会删除已通过初始 ‘sprites’ 配置或先前调用 ‘setSprites’ 添加的精灵。它只会添加新精灵。这是因为 ‘sprites’ 配置旨在声明式使用。如果您需要操作精灵，可以使用表面方法执行此操作。

使用多个表面

拥有多个表面的能力对于性能（和电池寿命）原因很有用。由于精灵属性更改会导致整个表面及其精灵重新渲染，因此最好按表面对精灵进行分组。这意味着对一组精灵的更改只会触发它们所在的表面重新渲染。Sencha Chart 包建立在 Draw 包之上，它严重依赖此功能。如果您有像交叉缩放这样的交互在您的图表中，只有用于渲染缩放矩形的表面在您进行选择时才会重新绘制。这可以防止序列和轴表面被重新绘制，从而节省性能。

我们还可以重写上面的示例，使其更精细。这将使我们更好地理解运动部件

var drawContainer = new Ext.draw.Container({    
    renderTo: document.body,    
    width: 250,    
    height: 250    
});

var mainSurface = drawContainer.getSurface(); // --- getSurface('main')

mainSurface.add({ // add sprite to the surface    
    type: 'rect',    
    x: 50,    
    y: 50,    
    width: 100,    
    height: 100,    
    lineWidth: 4,    
    strokeStyle: 'green',    
    fillStyle: 'yellow'    
});

mainSurface.renderFrame(); // --- renders all the sprites in the surface

在 Fiddle 中打开

修改精灵属性

接下来，让我们看看如何修改精灵的属性。例如，我们可以通过使其更宽来使我们的 ‘rect’ 精灵更矩形。

首先，我们需要获取对我们的精灵的引用。一种方法是获取表面的 ‘items’ 配置，它是属于所述表面的所有精灵的数组

var items = mainSurface.getItems(),
    rectSprite = items[0];

或者，我们可以使用表面的 get 方法

var rectSprite = mainSurface.get(0);

最后，我们可以为我们的精灵分配一个 ID，然后通过所述 ID 获取

mainSurface.add({
    type: 'rect',
    id: 'myRect',
    ...
});

var rectSprite = mainSurface.get('myRect');

现在我们可以更改精灵的宽度。这就是我们这样做的方式

rectSprite.setAttributes({
    width: 150    
});

// --- Repaint the surface after changing sprite's attributes

mainSurface.renderFrame();

请注意，我们不能使用 ‘rectSprite.setWidth(150);’，因为 ‘width’ 不是配置。

image alt text

在 Fiddle 中打开

我们还可以一次设置多个属性，这对于性能效率来说是最好的。让我们一次性更改填充和描边的颜色

rectSprite.setAttributes({
    fillStyle: 'rgba(255, 0, 0, .5)',
    strokeStyle: 'rgb(0, 0, 0)'
});

注意： 为了最大限度地提高动画的易用性，最好使用符合 CSS 标准的 rgb 函数来指定包含 alpha 或不透明度值的颜色值，而不是命名颜色，例如 'white' 或 'fuscia' 以及 globalAlpha、fillOpacity 和 strokeOpacity 配置。

image alt text

在 Fiddle 中打开

尝试更改其他属性，看看它如何影响精灵。您可以参考 [Ext JS 文档以查看支持的属性。

结论

如您所见，使用精灵与使用组件没有太大区别。精灵使用了相同的原则。组件式方法不是直接处理 HTML，而是通过不强迫您直接处理 SVG 元素和 Canvas API 调用来节省您的时间。您只需创建精灵并配置属性，绘图包会处理其余的事情。

在本系列的第二部分中，我们将学习如何动画、转换和与精灵交互。这包括创建您自己的精灵的方法和方法。我们还将介绍特殊的精灵功能，例如“实例化”和“复合”，它们有助于提高性能并降低代码复杂性。

image alt text

与此同时，我们希望您玩得开心，尝试不同类型的精灵，例如绘图包中提供的圆形、线条或文本。

目录

术语、图标和标签

访问级别

成员类型

成员语法

成员标志

类图标

成员图标

导航和功能

类成员快速导航菜单

Getter 和 Setter 方法

历史记录栏

搜索和过滤器

API 文档类元数据

展开和折叠示例和类成员

桌面与移动视图

查看类源代码

Ext JS 7.8.0

目录

使用 Sencha Ext JS 创建精美图像 - 第 1 部分

一个简单的精灵

绘制容器

使用多个表面

修改精灵属性

结论

Ext JS 7.8.0