XML用户界面语言（XUL）开发入门(5)

画布控件

画布控件并不是一个真正的XUL控件。它是一个HTML控件。虽然 Safari 浏览器引入了画布元素，但 Firefox 仍然支持它???Web Hypertext Application Technology Working Group (WHATWG) 使画布成为将要推出的HTML5 规范的一部分。不过，当前所有版本的 Internet Explorer® 都没有支持它，包括 Internet Explorer 8 的 beta 版。因此，大部分Web开发人员不能利用这一特性，除非他们的用户不使用 Internet
Explorer。然而，进行XUL开发时，这并不是什么问题。通过XUL应用程序，您可以使用任何 Firefox 支持的HTML、CSS 和 JavaScript。它只在XUL应用程序的内部执行，而不是Web浏览器。因此，您不用担心它不能在 Internet Explorer 上使用。

画布控件允许应用程序在控件内部绘制。这种绘制通常使用 JavaScript 自动完成。同样，要使用户能够进行绘制，您可以使用 JavaScript 监听带有该控件的用户交互，然后使用画布 API 进行绘制。在这个应用程序中，canvas.js 脚本完成了所有这些任务。清单 5 展示了该文件的内容。

清单 5. JavaScript 画布控件代码

// courtesy of Mozilla's Mark Finkler

// http://starkravingfinkle.org/blog 
　function　Scribbler_init() {

　　Scribbler.init();

　}

　var Scribbler = {

　　canvas : null,

　　ctx : null,

　　drawing : false,

　　init : function() {

　　　this.canvas = document.getElementById("canvas");

　　　this.ctx = this.canvas.getContext("2d");

　　　this.drawing = false;

　　　this.canvas.addEventListener("mousedown", this.doDrawStart, false);

　　　addEventListener("mouseup", this.doDrawStop, false);

　　　this.canvas.addEventListener("mousemove", this.doDrawUpdate, false);

　　},

　　doDrawStart : function(event) {

　　　// Calculate the position of the mouse over an element. To do this, subtract

　　　// the position of the element the mouse is over from the mouse position. The

　　　// element's position can be determined from its boxObject.

　　　// We are using the <box> container as aXULwrapper

　　　// for theHTML<canvas>

　　　var offsetX = (event.clientX - event.target.parentNode.boxObject.x);

　　　var offsetY = (event.clientY - event.target.parentNode.boxObject.y);

　　　Scribbler.ctx.beginPath();

　　　Scribbler.ctx.moveTo(offsetX, offsetY);

　　　Scribbler.drawing = true;

　　},

　　doDrawStop : function(event) {

　　　if (Scribbler.drawing) {

　　　　Scribbler.ctx.closePath();

　　　　Scribbler.drawing = false;

　　　}

　　},

　　doDrawUpdate : function(event) {

　　　if (Scribbler.drawing) {

　　　　// Calculate the position of the mouse over an element. To do this, subtract

　　　　// the position of the element the mouse is over from the mouse position. The

　　　　// element's position can be determined from its boxObject.

　　　　// We are using the <box> container as aXULwrapper

　　　　// for theHTML<canvas>

　　　　var offsetX = (event.clientX - event.target.parentNode.boxObject.x);

　　　　var offsetY = (event.clientY - event.target.parentNode.boxObject.y);

　　　　Scribbler.ctx.lineTo(offsetX, offsetY);

　　　　Scribbler.ctx.stroke();

　　　}

　　},

　　doDrawClear : function() {

　　　this.ctx.fillStyle = "#fff";

　　　this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

　　}

　};

Scribbler_init();

清单 5 中的代码创建了一个 Scribbler 对象。这个对象监听画布控件内的 3 个事件：mousedown、mousemove 和 mouseup。这些事件在用户按下鼠标、移动鼠标然后松开鼠标时触发。这个代码仅在这些事件期间捕捉鼠标的位置并确定相对的位置，然后在这些点之间绘制线条。了解签名控件的工作原理之后，就可以测试这个应用程序了。

运行应用程序

您可以使用 XULRunner 或 Firefox 启动这个应用程序。图 5 是博客编辑器 UI 的屏幕截图。

图 5. 博客编辑器 UI