如何让 fabricJS 处理触摸事件？

Question

I have an application developped with phonegap and I am testing the touch support for fabricJS but somehow it doesn't work for me.我有一个使用phonegap 开发的应用程序，我正在测试fabricJS 的触摸支持，但不知何故它对我不起作用。

I tried creating a custom version here but it doesn't work with it.我尝试在这里创建一个自定义版本，但它不适用于它。

I have this jsfiddle where I used another version called fabric_events.js but it doesn't seems to work too.我有这个 jsfiddle ，我在其中使用了另一个名为 fabric_events.js 的版本，但它似乎也不起作用。 (BTW how do you upload your own version to jsfiddle?) （顺便说一句，您如何将自己的版本上传到 jsfiddle？）

so I tried the FabricJS touch events demo and it DOES work!!所以我尝试了 FabricJS触摸事件演示，它确实有效！

since the demo worked I tried to download it's own version from http://fabricjs.com/lib/fabric_with_gestures.js but still no luck.由于演示有效，我尝试从http://fabricjs.com/lib/fabric_with_gestures.js下载它自己的版本，但仍然没有运气。

this is my code:这是我的代码：

    <!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>

Answer 1

Sorry for the late answer.抱歉回复晚了。 I am working with Fabric.js at the moment and I do not have any problems with gestures.我目前正在使用 Fabric.js，手势没有任何问题。 I have tried your code, it is generally working if you care for three things:我已经尝试过您的代码，如果您关心三件事，它通常可以工作：

1.) Very important: Please remove style='z-index:-1' from the canvas itself. 1.) 非常重要：请从画布本身中删除style='z-index:-1' 。 The z-index property specifies the stack order of an element and a negative number will not allow you to interact with the canvas in your example. z-index 属性指定元素的堆叠顺序，负数将不允许您与示例中的画布进行交互。 More information: CSS z-index Property .更多信息： CSS z-index 属性。
2.) Are you sure that you had created a Custom Build with "Interaction" and "Gestures"? 2.) 你确定你已经创建了一个带有“交互”和“手势”的自定义构建吗？ "Gestures" is dependent on "Interaction". “手势”依赖于“交互”。 If you are unsure, create a Custom Build with all modules except "Node" (unless you want to use Node.js later).如果您不确定，请创建一个包含除“Node”之外的所有模块的自定义构建（除非您以后想使用 Node.js）。
3.) Fabric.js and jQuery must be in the subfolder 'js' regarding to your code. 3.) Fabric.js 和 jQuery 必须位于与您的代码相关的子文件夹“js”中。 But I would think that it was like that already.但我想它已经是这样了。

Then it should work for you, too.那么它也应该对你有用。

如何让 fabricJS 处理触摸事件？

问题描述

1 个解决方案

解决方案1
0 2015-11-25 09:18:51

如何让 fabricJS 处理触摸事件？

问题描述

1 个解决方案

解决方案1 0 2015-11-25 09:18:51

解决方案1
0 2015-11-25 09:18:51