0
キャンバスに長方形があります。また、赤色から緑色に矩形を変更する2つのボタン。 マウスからイベントを取得する場合：downイベントは動作しますが、コンテキストメニュー（右クリック）では表示されません。私は何が欠けていますか？要素を右クリックする方法（fabric.js）
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>