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

【问题标题】：KineticJS Image Sprite as toolbar button images in canvasKineticJS Image Sprite 作为画布中的工具栏按钮图像
【发布时间】：2013-02-16 20:28:14
【问题描述】：

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

编辑：

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

编辑 2：已删除链接

【问题讨论】：

请给我看看你的代码。
这个论坛不能以“给我做一些代码”的方式工作，发布您尝试过的内容，人们会帮助您解决问题
@EliteOctagon：很抱歉没有发布代码，我知道你发表评论的意思（我已经在这个论坛沉默了一年多）。我再次道歉.. :)

标签： html canvas sprite toolbar kineticjs

【解决方案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() + '\"');
        });

【讨论】：