मैं 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')
}
}
});
धन्यवाद। मैंने यह काम किया और बिल्कुल इस तरह से। इसलिए आपकी नोक के लिए बहुत बहुत धन्यवाद। – burakukula
मेरे पास चाबियाँ सही ढंग से बाध्य हैं, लेकिन 'बाएं' इसे सही भेजती है और अन्य दिशाएं काम नहीं करती हैं, अजीब। क्रोम पर मैक कीबोर्ड। –
@PaulRedmond: यह स्पष्ट हो सकता है, लेकिन बस मामले में --- क्या आपके पास प्रत्येक मामले के बाद 'ब्रेक' बयान है? उन लोगों को छोड़कर आपके व्यवहार में परिणाम हो सकता है। –