我用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') } } });
Joaozinho da.. 10
例如在案例39中尝试:
canvas.getActiveObject().left += 5;
然后也许canvas.renderAll()