如何從右鍵單擊元素（fabric.js）
[英]How to get element from right click on it (fabric.js)
問題描述
我在畫布上有一個矩形。 還有兩個按鈕可以將矩形從紅色變為綠色。 如果我從mouse：down事件中獲取元素它可以工作但是從contextmenu（右鍵單擊）它不會。 我錯過了什么？
var canvas = new fabric.Canvas('c'); var objectname =''; function createObject() { objectname = prompt("Enter name : ", ""); var rect1 = new fabric.Rect({ left: 100, top: 100, fill: 'green', width: 20, height: 20, id :objectname+"Rect" }); canvas.add(rect1); alert(rect1.id); } document.getElementById("CreateAnObject").onclick = createObject; fabric.Canvas.prototype.getItemByName1 = function(name) { var object = null, objects = this.getObjects(); for (var i = 0, len = this.size(); i < len; i++) { if (objects[i].id && objects[i].id === name) { object = objects[i]; break; } } return object; }; function ObjectRed(){ canvas.getItemByName1(objectname).setFill('Red'); canvas.renderAll(); } document.getElementById("ObjectRed").onclick = ObjectRed; function ObjectGreen(){ canvas.getItemByName1 (objectname).setFill('Green'); canvas.renderAll(); } document.getElementById("ObjectGreen").onclick = ObjectGreen; canvas.on('mouse:down', function(e) { objectname = e.target.id; }); document.addEventListener('contextmenu', function(ev) { ev.preventDefault(); objectname = e.target.id; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Custom!</title> </head> <body> <input type="button" id="ObjectRed" value="Problem" /><br/> <input type="button" id="ObjectGreen" value="Okay" /><br/> <input type="button" id="CreateAnObject" value="CreateAnObject"/><br/> <canvas id="c" width="1010" height="550" style="border:1px solid #000000;"> <script src="fabric.min.js"></script> <script src="createObject.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2017-06-12 08:42:33
不確定是否是問題，但由於fabricjs我也做不到，所以我不得不在fabricjs添加事件。
fabric.util.addListener(canvas, 'contextmenu', function (e) {
your code here
}
Fabric.js 鼠標右鍵單擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.