Question

首先，我使用术语“类”来表示原型的函数，这些函数可能与我正在处理的主初始化文件位于一个单独的文件中。

现在我的问题/问题：我正在努力用JavaScript / HTML5构建一些东西，并尝试“正确”编程（即使用原型，我希望，标准）。在我的主JavaScript文件中，我有一些方法可以使用一个实例（基本上是我的基于OOP / prototype的脚本的根实例）来设置画布。

我还有另一个加载的文件，其中包含一个用于创建可点击按钮的“类”。截至目前，我只是想在画布上绘制按钮，但是，我无法访问画布的实例，因为我认为实例超出范围（这很好，我不我希望我所做的一切都包含一个用于引用实例的长点符号。但是，这在尝试在画布上绘制矩形时给我带来麻烦，考虑到按钮所在的“类”，无法引用它之外的上下文。

我通过使用以下内容找到了解决方法：

function CreateButton(btn_x, btn_y, btn_width, btn_height, btn_txt) {

    // ... (check and define parameters)

    CreateButton.prototype.custom_canvas = document.getElementById('root_canvas');
    CreateButton.prototype.ctxt = this.custom_canvas.getContext('2d');

    CreateButton.prototype.ctxt.fillStyle = '#666666';
    CreateButton.prototype.ctxt.fillRect(this.x, this.y, this.width, this.height);
}

基本上，它是用同名画布在画布上写的吗？我假设我之后仍然可以操作常规画布，它就像是一个画布元素一样。我担心在添加很多东西时画布上的重绘会占用大量内存，但是，无论方法如何，都无法避免在画布上写字（即使在同一范围内）。

有任何建议或帮助吗？或者我在不同类中使用相同画布的方法是否可以接受？

感谢您的反馈。

[UPDATE] 嗯，也许我应该尝试将上下文作为参数传递并使用它。

...或者我应该将画布设为全局对象？有什么建议吗？

Answer 1

我猜你可以尝试实现某种“WidgetManager”，它保留了对canvas和你的小部件的引用。它将使用回调机制来呈现小部件。每个小部件（即在这种情况下为Button）将具有某种渲染状态（按下，释放）和某种内部状态。其他小部件可能会有更复杂的状态。

请注意，“WidgetManager”应该跟踪小部件“z”并且用户按下（哪个小部件被点击）。基于此，它应该能够触发绑定到小部件的处理程序。在某种程度上，你必须重新发明已经基本的UI库。：）

我认为在进入实施阶段之前，通过这种方式设计您的设计会更好。很大程度上取决于你真正想要的东西。：）

请注意，您可以使用多个canvasii而不是一个来简化渲染并进行大量检查。在这种情况下，你将不得不处理z-index和绝对定位，但至少你可以背负一些现有的东西，而不必亲自实现它。

如何在JavaScript类中正确使用HTML5的画布？

1 个答案: