0

所以本质上我想为画布创建下面的函数。现在，这适用于其中包含元素的任何 id：

$('.class').click(function(){
    var color = prompt('what color would you like to change this stroke to?');
    $('.class').each(function(){
        $(this).css('background-color', color);
    });
});

有没有办法为画布中的项目分配值，以便我可以触发我需要的东西，或者这根本不可能？

解释：

如果不清楚……可以说当我按下按钮时，我以 10 个一组的形式将东西添加到我的画布中。如果我按该按钮 3 次，则我有 3 组，每组 10 个。如果我要单击第 2 组中的任何内容，则第 2 组中的所有内容都会将其背景颜色更改为提示的颜色！

4

1 回答 1

1

由于 Canvas 是一个被动元素，因为您不知道它们是什么，所以您需要自己保存所有的像素。

为此，您可以创建包含重要信息的对象，例如区域和颜色。

例如（有无数种方法可以制作这些，但为了简单起见）：

// ctx = context
function myObject(ctx, x, y, w, h, color) {

    this.render = function() {
        ctx.fillStyle = color;
        ctx.fillRect(x, y, w, h);
    }

    this.setColor = function(newColor) {
        color = newColor;
        this.render();
    }

    this.setPosition = function(newX, newY) {
        x = newX;
        y = newY;
        this.render();
    }
    //... etc. ...
}

现在您可以创建一个数组或堆栈来保存您的对象：

var stack = [];

当您按下按钮时：

var w = 50, h = 50, i = 0;

for(;i < 10; i++) {
    var o = myObject(ctx, i * w - 2, 0, w, h);
    stack.push(o);
    o.render();
}

当你需要更新一个对象时，你只需调用它的setColor函数：

//n = index, use a for-loop to update a range (group)
stack[n].setColor(newColor);

如果您需要组，则可以这样堆叠它们：

var group = [];

如上所述填充组，然后：

stack.push(group);

（并且您通过在对象上实现一个采用 ax 和 y 位置并与对象的位置和宽度/高度进行比较的方法来进行命中测试）。

为了提高内存效率，您可能需要prototype一些方法（如果它们不需要访问内部变量等）。

希望有帮助。

于 2013-06-28T10:18:54.127 回答