使用谷歌关闭创建一个简单的绘图区域小部件

发布于 2024-08-21 23:01:56 字数 1034 浏览 7 评论 0原文

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

我通过在 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);
};

原文

Here I've tried to create a simple drawing area widget containing a single circle, using google closure.

I load it by calling sketcher.load() within html script tag and get an error:

Uncaught TypeError: Cannot set property 'Widget' of undefined - what is not right here?

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);
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

向地狱狂奔 2024-08-28 23:01:56

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

第二个问题：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);
};

First problem: sketcher is a namespace, because you goog.provide it. You don't need to declare it again.

Second problem: sketcher.Widget should be thus, not sketcher.prototype.Widget. Only functions have prototypes; you should go back and review how objects work in JavaScript unless that was just a typo. It should look like this.

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);
};

回复收藏 0 原文