HTML5 Canvas通过单击选项卡切换内容

Question

我在HTML5 Canvas上做了一个简单的项目。我想在我的画布上有几个标签，例如让我们选择4个标签。所有这些选项卡都应在“活动内容”区域中显示一些信息（参见下图）。将显示来自不同选项卡的不同内容。

这就是我想要的样子，非常简单和基本：

如何在单击画布中的不同选项卡时切换内容？

Answer 1

Canvas没有原生支持使用内容进行绘制，因为所有内容都只是位图上的像素，因此要使用canvas获得此类行为，您必须自己实现基本逻辑。

我会推荐一种基于对象的方法。创建选项卡作为对象，然后允许您渲染它们，但也可以测试它们的命中率，并且很容易扩展选项卡的数量等。

Live demo here

对象可以非常简单：

var Tab = function(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.lineWidth = 3;
};

然后添加一个方法来构建矩形的路径并渲染它，这只是：

var Tab = function(x, y, width, height, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.lineWidth = 3;

    /// creates a new path on the context
    this.getPath = function(ctx) {
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
    };

    /// draws this tab
    this.render = function(ctx) {
        this.getPath(ctx);
        ctx.strokeStyle = this.color;
        ctx.lineWidth = this.lineWidth;
        ctx.stroke();
    };
};

这样做的目的是使用它来渲染它以及命中测试它。

现在您可以创建几个标签：

var myTabs = [
        new Tab(0, 0, 100, 50, 'blue'),
        new Tab(100, 0, 100, 50, 'red'),
        new Tab(200, 0, 100, 50, 'yellow'),
        new Tab(300, 0, 100, 50, 'orange'),
    ];

现在只需渲染它们：

for(var i = 0, tab; tab = myTabs[i++];)
    tab.render(ctx);

进行测试：

for(var i = 0, tab; tab = myTabs[i++];) {
    tab.getPath(ctx);
    if (ctx.isPointInPath(x, y)) {
        // got a hit, update content
    }
}

我会留给你扩展Tab对象，能够接受和渲染文本等等： - ）

希望这有帮助！

Answer 2

可以基于状态变量绘制内容。您可以使用switch语句来执行此操作。然后在用户单击选项卡时更改状态变量的值。 要检测选项卡上的点击，您可以将onclick事件绑定到画布，并在事件处理程序中检查点击的位置（即在哪个选项卡上）并相应地设置状态变量。