jQWidgets jqxDraw renderEngine 属性

在使用 jQWidgets 的绘图组件 jqxDraw 进行图形绘制时，常常需要设置该组件的 renderEngine 属性，该属性用于指定图形渲染引擎。本文将介绍该属性的使用及注意事项。

属性值

目前 jQWidgets 的 jqxDraw 组件支持以下三种图形渲染引擎：

• VML：使用微软开发的 VML（Vector Markup Language）渲染图形，仅在 IE8 及以下版本中生效。
• SVG：使用 SVG（Scalable Vector Graphics）渲染图形，该引擎在各种现代浏览器中良好支持，但在 IE9 及以下版本中不支持。
• CANVAS：使用 HTML5 中新增的 CANVAS 标签渲染图形，该引擎在大部分现代浏览器中支持，但在 IE8 及以下版本中不支持。

使用方法

要使用 jqxDraw 组件，需要通过 jQWidgets 的 CDN 或下载本地 jQWidgets 文件包并引入相应的 js 和 css 文件。在 HTML 中添加以下代码：

<div id="drawArea"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.0.0/jqxcore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.0.0/jqxdraw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/9.0.0/jqx.base.css" />
<script>
$(function() {
    // 创建 jxqDraw 组件
    var draw = $('#drawArea').jqxDraw({
        width: 300,
        height: 200,
        renderEngine: 'SVG'
    });

    // 绘制图形
    var rect = draw.rect(10, 10, 100, 50);
    rect.attr({
        fill: '#00BFFF',
        stroke: '#00688B',
        strokeWidth: 2
    });
});
</script>

在上述代码中，先创建一个名为 drawArea 的 HTML 元素作为绘图区域，在该元素上调用 jqxDraw 方法初始化 jxqDraw 组件，并通过 renderEngine 属性指定使用 SVG 引擎渲染图形。接着使用 draw 对象的 rect 方法绘制矩形，再通过该矩形的 attr 方法设置背景填充色、边框颜色及宽度。

注意事项

• 在选用 renderEngine 属性时，需根据目标浏览器选择合适的引擎。通常应优先选用 SVG 引擎，若目标浏览器不支持 SVG，则再考虑使用 VML 或 CANVAS。
• 在使用 VML 引擎时，需将 HTML 的 documentMode 设为 8 或 lower，否则无法正常渲染图形。可以通过添加以下 meta 元素来设置：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

• 在使用 SVG 引擎时，需注意 SVG 标签的命名空间。若使用 jQuery 的选择器选取 SVG 标签进行样式设置，则需为每个设置添加命名空间，如下所示：

// 不带命名空间的写法
$('rect').attr({
    fill: '#00BFFF',
    stroke: '#00688B',
    strokeWidth: 2
});

// 带命名空间的写法
$('rect', draw.container).attr({
    'xmlns': 'http://www.w3.org/2000/svg',
    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
    'fill': '#00BFFF',
    'stroke': '#00688B',
    'stroke-width': 2
});