0

在这里，我尝试使用 google 闭包创建一个包含单个圆圈的简单绘图区域小部件。

我通过在 html 脚本标签中调用来加载它sketcher.load()并得到一个错误：

Uncaught TypeError: Cannot set property 'Widget' of undefined- 这里有什么不对？

goog.provide('sketcher');

goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');

var sketcher = {};

sketcher.prototype.Widget = function(el){
    goog.ui.Component.call(this);
    this.parent_ = goog.dom.getElement(el);

    this.g_ = new goog.graphics.createGraphics(600, 400);
    this.appendChild(this.g_);$

    var fill = new goog.graphics.SolidFill('yellow');
    var stroke = new goog.graphics.Stroke(1,'black');
    circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
    this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);

sketcher.prototype.load = function(){
    var canvas = goog.dom.createDom('div', {'id':'canvas'});
    goog.dom.appendChild(document.body, canvas);
    var widget = new sketcher.Widget(canvas);
};
4

2 回答 2

2

第一个问题：sketcher 是一个命名空间，因为你 goog.provide 它。您无需再次声明它。

第二个问题：sketcher.Widget 应该是这样，而不是 sketcher.prototype.Widget。只有函数有原型；你应该回过头来回顾一下对象在 JavaScript 中是如何工作的，除非那只是一个错字。它应该看起来像这样。

goog.provide('sketcher');

goog.require('goog.dom');
goog.require('goog.graphics');
goog.require('goog.ui.Component');

/**
 * My sketcher widget.
 * @param {Element} e1
 * @constructor
 */
sketcher.Widget = function(el){
    goog.ui.Component.call(this);
    this.parent_ = goog.dom.getElement(el);

    this.g_ = new goog.graphics.createGraphics(600, 400);
    this.appendChild(this.g_);$

    var fill = new goog.graphics.SolidFill('yellow');
    var stroke = new goog.graphics.Stroke(1,'black');
    circle = this.g_.drawCircle(300, 200, 50, stroke, fill);
    this.g_.render(this._parent);
};
goog.inherits(sketcher.Widget, goog.ui.Component);

sketcher.prototype.load = function(){
    var canvas = goog.dom.createDom('div', {'id':'canvas'});
    goog.dom.appendChild(document.body, canvas);
    var widget = new sketcher.Widget(canvas);
};
于 2010-03-07T18:34:45.157 回答
0

这是一个使用闭包构建的简单 svg 绘图小部件的链接

http://webos-goodies.googlecode.com/svn/trunk/blog/articles/make_a_drawing_tool_with_closure_library/simple-draw.js

于 2010-02-21T15:56:03.140 回答