使用contextMenu.js与fabric.js左键单击事件不起作用

时间:2016-02-25 10:04:03

标签: jquery canvas contextmenu fabricjs

我尝试使用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);
});

感谢任何帮助。

0 个答案:

没有答案