html - KineticJS Image Sprite 作为画布中的工具栏按钮图像

Question

我正在尝试使用 KineticJS 在画布（无 div 元素）中创建一个工具栏。我有一个由 10 个图像组成的图像精灵，我需要将单个精灵图像映射为工具栏中的按钮。如何使用 KineticJS.Sprite 做到这一点。

编辑：

事件处理不正确（我从最后一个精灵索引（即 7）获取订阅，我是否应该创建单独的对象来存储每个精灵事件）。？

编辑 2：链接已删除

Answer 1

经过Kinetic JS代码库终于找到了解决上述问题的方法，最终实现分享如下：

var buttons = {
        button: [{
            //button1
            x: 0,
            y: 0,
            width: 28,
            height: 28
        }, {
            //button2
            x: 29,
            y: 0,
            width: 28,
            height: 28
        }, {
            //button3
            x: 58,
            y: 0,
            width: 28,
            height: 28
        }]};
var imageObj = new Image();
imageObj.onload = function () {
        for (var i = 0; i < 12; i++) {
            var blob = new Kinetic.Sprite({
                x: 50 + i * 30,
                y: 40,
                name: i,
                image: imageObj,
                index: i,
                animation: 'button',
                animations: buttons
            });
            toolbarbuttonGroup.add(blob);
        }

        toolbarbuttonGroup.on('click', function (evt) {
            var buttonId= evt.shape;
            alert('Clicked on \"' + buttonId.getName() + '\"');
        });