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() + '\"');
        });

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

1 个答案: