我尝试使用fabric.js库在画布上绘制形状,并在点击画布尺寸内的任何对象时添加contextmenu。当我在contextmenu
上调用dblclick
或右键单击但我真的需要在左键单击事件上调用它时,它运行良好。我怎么能这样做?
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="contextMenu.js" type="text/javascript"></script>
<script src="fabric.js" type="text/javascript"></script>
<script src="fabric.canvasex.js"></script>
<script src="y.js" type="text/javascript"></script>
<link rel="stylesheet" href="final.css">
<link rel="stylesheet" href="contextMenu.css">
</head>
<body>
<div class="column1">
<canvas id="panel" width="200" height="300" style="border:1px solid blue"></canvas>
</div>
</body>
</html>
y.js文件:
$(document).ready(function(){
var canvas = new fabric.CanvasEx('panel');
var menu = [{
name: 'create',
img: 'images/create.png',
title: 'create button',
fun: function () {
alert('i am add button')
}
}];
tableShape = new fabric.Rect({
width: 70,
height: 50,
fill: 'green',
selectable:false,
});
var text = new fabric.IText("Table #2", {
fontSize: 10,
top: 20,
left: 10,
});
var group = new fabric.Group([tableShape, text], {
left: 50,
});
canvas.add(group);
canvas.renderAll();
$('.column1').contextMenu(menu);
});
感谢任何帮助。