带有键盘的Fabric js移动图像

Question

我正在使用fabric.js 创建简单的工具，我需要添加使用键盘移动对象的功能。我被卡住了。目前我登录到控制台的键盘事件，所以我知道它有效。但我不知道如何将此功能添加到我的画布图像中。有帮助吗？

$(function(){
    var canvas = new fabric.Canvas('imageCanvas', {
        backgroundColor: 'rgba(255, 255, 255, 0)'
    });
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);

    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var img = new Image();
            img.onload = function () {
                var imgInstance = new fabric.Image(img, {

                })
                canvas.add(imgInstance);
            }
            img.src = event.target.result;

        }
        reader.readAsDataURL(e.target.files[0]);
    }

    canvas.on('mouse:down', function(options) {
      console.log(options.e.clientX, options.e.clientY);
    });

    var canvasWrapper = document.getElementById('canvasWrapper');
    canvasWrapper.tabIndex = 1000;
    canvasWrapper.addEventListener("keydown", doKeyDown, false);

    function doKeyDown(e) {
        document.onkeydown = function(e) {
            switch (e.keyCode) {
                case 38:  /* Up arrow was pressed */
                    console.log('up works')
                  break;
                case 40:  /* Down arrow was pressed */
                    console.log('down works')
                  break;
                case 37:  /* Left arrow was pressed */
                    console.log('left works')
                  break;
                case 39:  /* Right arrow was pressed */
                   console.log('right works')
                  break;
              }
        }
    }

    var imageSaver = document.getElementById('imageSaver');
    imageSaver.addEventListener('click', imageBorder, false);
    imageSaver.addEventListener('click', saveImage, false);

    function imageBorder(e) {
        canvas.item(0).hasControls = canvas.item(0).hasBorders = false;
    }

    function saveImage(e) {
        this.href = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
        this.download = 'test.png'
        if(saveImage) {
            location.reload();
        }else {
            alert('somtehing went wrong')
        }
    }

});

Answer 1

以案例 39 为例：

canvas.getActiveObject().left += 5;

然后可能是 canvas.renderAll()

Answer 2

这是我的工作代码：

HTML：

<div id="canvas-wrapper">
     <canvas id="c" width="900" height="600"></canvas>
</div>

JS：

var processKeys = function (evt) {
    evt = evt || window.event;

    var movementDelta = 2;

    var activeObject = canvas.getActiveObject();
    var activeGroup = canvas.getActiveGroup();

    if (evt.keyCode === 37) {
        evt.preventDefault(); // Prevent the default action
        if (activeObject) {
            var a = activeObject.get('left') - movementDelta;
            activeObject.set('left', a);
        }
        else if (activeGroup) {
            var a = activeGroup.get('left') - movementDelta;
            activeGroup.set('left', a);
        }

    } else if (evt.keyCode === 39) {
        evt.preventDefault(); // Prevent the default action
        if (activeObject) {
            var a = activeObject.get('left') + movementDelta;
            activeObject.set('left', a);
        }
        else if (activeGroup) {
            var a = activeGroup.get('left') + movementDelta;
            activeGroup.set('left', a);
        }

    } else if (evt.keyCode === 38) {
        evt.preventDefault(); // Prevent the default action
        if (activeObject) {
            var a = activeObject.get('top') - movementDelta;
            activeObject.set('top', a);
        }
        else if (activeGroup) {
            var a = activeGroup.get('top') - movementDelta;
            activeGroup.set('top', a);
        }

    } else if (evt.keyCode === 40) {
        evt.preventDefault(); // Prevent the default action
        if (activeObject) {
            var a = activeObject.get('top') + movementDelta;
            activeObject.set('top', a);
        }
        else if (activeGroup) {
            var a = activeGroup.get('top') + movementDelta;
            activeGroup.set('top', a);
        }
    }

    if (activeObject) {
        activeObject.setCoords();
        canvas.renderAll();
    } else if (activeGroup) {
        activeGroup.setCoords();
        canvas.renderAll();
    }
};

var canvasWrapper = document.getElementById('canvas-wrapper');
canvasWrapper.tabIndex = 1000;
canvasWrapper.addEventListener("keydown", processKeys, false);
canvasWrapper.style.outline = "none";  // remove the blue halo around canvas-wrapper