画布控件
画布控件并不是一个真正的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
![](http://www.bianceng.cn/upimg/allimg/0911/96_091108041451_1.jpg)