如何让fabricJS处理触摸事件？

Question

如何让fabricJS处理触摸事件？

Ori*_*Ori 5 javascript jquery fabricjs cordova phonegap-build

我有一个使用phonegap开发的应用程序，我正在测试fabricJS的触摸支持，但不知何故它对我不起作用。

我尝试在这里创建自定义版本，但它不起作用。

我有这个 jsfiddle，我使用了另一个名为 Fabric_events.js 的版本，但它似乎也不起作用。（顺便问一下，你如何将自己的版本上传到 jsfiddle？）

所以我尝试了 FabricJS触摸事件演示，它确实有效！

由于演示有效，我尝试从http://fabricjs.com/lib/fabric_with_gestures.js下载它自己的版本，但仍然没有成功。

这是我的代码：

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=true" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/fabric_with_gestures.js"></script>
    <script type="text/javascript" >


        $(document).ready

        (
            function () {

                var canvas = new fabric.Canvas('c');


                // Do some initializing stuff
                fabric.Object.prototype.set({
                    transparentCorners: false,
                    cornerColor: 'rgba(102,153,255,0.5)',
                    cornerSize: 12,
                    padding: 5
                });

                alert('fabric.isTouchSupported=' + fabric.isTouchSupported);
                var info = document.getElementById('info');
                canvas.on({
                    'touch:gesture': function () {
                        var text = document.createTextNode(' Gesture ');
                        info.insertBefore(text, info.firstChild);
                    },
                    'touch:drag': function () {
                        var text = document.createTextNode(' Dragging ');
                        info.insertBefore(text, info.firstChild);
                    },
                    'touch:orientation': function () {
                        var text = document.createTextNode(' Orientation ');
                        info.insertBefore(text, info.firstChild);
                    },
                    'touch:shake': function () {
                        var text = document.createTextNode(' Shaking ');
                        info.insertBefore(text, info.firstChild);
                    },
                    'touch:longpress': function () {
                        var text = document.createTextNode(' Longpress ');
                        info.insertBefore(text, info.firstChild);
                    }
                });


                fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
                    img.scale(0.5).set({
                        left: 150,
                        top: 150,
                        angle: -15
                    });
                    canvas.add(img);
                });

                canvas.add(new fabric.Rect({
                    left: 50,
                    top: 50,
                    fill: '#269926',
                    width: 100,
                    height: 100,
                    originX: 'left',
                    originY: 'top',
                    hasControls: true,
                    hasBorders: true,
                    selectable: true
                }));

                var obj = new fabric.Rect({
                    left: 20,
                    top: 20,
                    fill: '#555555',
                    width: 100,
                    height: 100,
                    originX: 'left',
                    originY: 'top',
                    hasControls: true,
                    hasBorders: true,
                    selectable: true
                });
                canvas.add(obj).renderAll();
                canvas.setActiveObject(obj)
                //canvas.sendToBack(obj)
            }

        );
    </script>
    <title></title>
    <style>
        canvas {
    border: 1px solid #999;
}

    </style>
</head>
<body>
    <canvas id="c" width="200" height="200" style='z-index:-1'></canvas>
    <p id='info' style='background: #eef; width: 583px; padding: 10px; overflow: scroll; height: 80px'></p>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jan*_*der 1

抱歉回复晚了。我目前正在使用 Fabric.js，手势方面没有任何问题。我已经尝试过你的代码，如果你关心三件事，它通常会起作用：

1.) 非常重要：请style='z-index:-1'从画布上移除。z-index 属性指定元素的堆栈顺序，负数将不允许您与示例中的画布进行交互。更多信息：CSS z-index 属性。
2.) 您确定您已经创建了带有“交互”和“手势”的自定义构建吗？“手势”依赖于“交互”。如果您不确定，请使用除“Node”之外的所有模块创建自定义构建（除非您稍后想使用 Node.js）。
3.) Fabric.js 和 jQuery 必须位于与您的代码相关的子文件夹“js”中。但我想事情已经是这样了。

那么它也应该适合你。

归档时间：	10 年，8 月前
查看次数：	9203 次
最近记录：	3 年，2 月前