javascript - 如何让 fabricJS 处理触摸事件？-6ren

javascript - 如何让 fabricJS 处理触摸事件？

转载作者：行者123 更新时间：2023-11-30 00:23:04

27

4

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

我尝试创建自定义版本 here但它不适用于它。

我有this jsfiddle我在其中使用了另一个名为 fabric_events.js 的版本，但它似乎也不起作用。 (顺便说一句，你如何将自己的版本上传到 jsfiddle？)

所以我尝试了 FabricJS touch events demo它确实有效!!

由于演示有效，我尝试从 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>

最佳答案

抱歉回答晚了。我目前正在使用 Fabric.js，我对手势没有任何问题。我已经尝试过您的代码，如果您关心三件事，它通常可以正常工作:

1.) 非常重要:请从 Canvas 本身中删除 style='z-index:-1'。 z-index 属性指定元素的堆叠顺序，负数将不允许您与示例中的 Canvas 进行交互。更多信息:CSS z-index Property .
2.) 你确定你已经创建了一个带有“交互”和“手势”的自定义构建吗？ “手势”依赖于“交互”。如果您不确定，请使用除“Node”之外的所有模块创建一个自定义构建(除非您以后想使用 Node.js)。
3.) Fabric.js 和 jQuery 必须位于与您的代码相关的子文件夹“js”中。但我认为它已经是那样了。

那么它也应该对你有用。

关于javascript - 如何让 fabricJS 处理触摸事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32472958/

27

4

0

文章推荐： android - ListView 中的按钮根据最终列表项被错误修改

fabricjs - FabricJs-如何为每个对象添加属性
我需要向现有对象属性集引入一些其他属性。喜欢: ID 地理位置等每当我绘制形状时，都需要向该形状添加其他属性，并且需要从toDataLessJSON()获取最佳答案从1.7.0版开始，lev
fabricjs - 在 fabricjs 中缩放一组对象时防止翻转
有什么方法可以防止在缩放对象组时发生翻转？我尝试了“lockScalingFlip”属性。但它仅在缩放单个对象时受支持。最佳答案在版本 1.4.11 中，设置 lockScalingFlip=t
fabricjs - 如何检查 fabricjs 文本是多行的？
我正在使用 fabric js。今天我遇到了这个问题“如何检查 fabricjs 文本是多行的？”。请帮我解决这个问题。提前致谢。最佳答案 fabricjs 文本有一个 _textLines 属性。
fabricjs - Fabricjs v2 之后 ClipTo 的替代品是什么？
clipTo 函数自 2.0 起已被弃用，是否有任何替代品或该功能刚刚被删除？最佳答案他们仍在努力(Clipping API) https://github.com/fabricjs/fabric
fabricjs - 在最新版本的 Fabricjs 中，clone() 不适用于路径对象
如果使用clone()方法克隆fabric.Path对象，则路径对象不会重复。我在这里看到了这个问题 https://github.com/kangax/fabric.js/issues/330但Fa
fabricjs - setText() 在 fabricjs 版本 2 中不起作用
我正在尝试将文本显式设置为文本框，在较旧的 fabricjs 版本中 object.setText("something") 在fabric js版本2中工作但不工作。这个版本中引入了其他任何方式吗？
fabricjs - 将 PDF 加载到 fabricjs Canvas 中
我有一个 fabricjs Canvas ，我需要输入 PDF，类似于加载图像的方式。我希望在加载到 Canvas 上之前我需要通过 PDFjs 将 PDF 转换为 PNG 吗？ docume
fabricjs - 需要背景图像拉伸(stretch)以覆盖 fabricjs 中的整个 Canvas
我可以上传背景图片。但我不知道如何拉伸(stretch)才能覆盖整个 Canvas 。示例代码 var fr = new FileReader; fr.onload = function() {
javascript - FabricJs:在 FabricJs Canvas 中绘制按钮的网格/数组(p*p)
我正在尝试在 FabricJs Canvas 内绘制按钮的网格/数组(p*p)。我能够创建所需的网格/数组。但我无法在相同高度和宽度的 block 内绘制/放置按钮。 HTML: Create
fabricjs - 设置绘制对象的控件可见性
我有一个 fabricjs Canvas ，上面有一个可以打开和关闭绘图的按钮。如何将自定义控件应用于我绘制的任何/所有绘制对象；例如，我想选择我画的任何一条线，并且只能旋转它们。我已阅读 the e
Fabricjs:在调整对象大小或缩放时如何更改不透明度？
我想在移动/调整大小/缩放/拖动时将对象的不透明度设置为 0.5。我们确实为所有这些事件处理程序提供了事件处理程序，但是当其中任何一个启动时，它们只会被触发一次。我想在事件完成后使对象不透明度=1。
fabricjs - 为结构对象设置最小和最大调整大小限制
我正在使用 fabric js 来调整对象大小，我希望用户在最小和最大限制内调整对象大小。如何使用fabric js做到这一点。我尝试过类似的属性 lockScalingX,lockScalingY
FabricJs-克隆对象丢失自定义属性
我已在 SVG 对象和 SVG 对象内的路径上设置自定义属性。我添加到 Canvas 的每个对象也被分配了一个“id”属性，以及我用来与应用程序中的对象交互的其他一些属性。到目前为止，当我克隆这些
fabricjs - 如何在fabricjs中获取对象标识符？
如何在fabricjs中获取对象标识符？例如 var text = new fabric.IText('hello world', { left: mouse1X, top: mouse1Y });
fabricjs - 将对象剪辑到使用自由画笔绘制的路径
Fabric.js 2.3.6 我正在尝试将对象剪辑到使用自由绘图灌木绘制的路径上。代码无法在路径内显示图像，我不确定我做错了什么。可以剪裁多个对象，因此我无法将路径应用于 Canvas 本身。 l
fabricjs - 如何仅在某一侧设置笔划？
有没有办法只在 Canvas 对象的一侧给笔画？例如，我只想为顶部提供笔划。当我申请时"strokeWidth:1" ，它适用于所有方面。我还没有找到任何属性或方法来解决我的问题。最佳答案对于已
Fabricjs - 仅通过边框选择
我正在使用 Fabric.js 在 Canvas 上绘制一些矩形。默认行为是在矩形内单击以选择它。如何更改行为，使其仅在单击矩形边框时才被选中？单击矩形内部而不是边框应该什么都不做。您可以通过
fabricjs-如何解锁宽高比
据我所知，当使用角控件调整对象的大小时，无论用户将鼠标移到何处，高度和宽度都会按比例更改，以保持对象的长宽比。我的客户希望用户在使用角控件时能够独立于宽高比调整高度和宽度。是否有允许设置的设置？最佳
fabricjs - 如何获得组fabricjs内对象的左上角
如何将组内三角形的 Canvas 相对位置(顶部，左侧)作为波纹管图像？我关注了这个话题:How to get the canvas-relative position of an object t
fabricjs - 小组成员不在小组中心
我正在创建一个简单的组，其中包含圆圈和文本，我希望文本位于圆圈的中心。 (就像 Fabricjs.com 首页上的小组演示一样!) var text = new fabric.Text('hello

首页

博学

6Ren·AI

商城

javascript - 如何让 fabricJS 处理触摸事件？