个人中心
gpt4 book ai didi

javascript - 如何将自由绘制的线条作为线条列表获取，其中每条线条都是坐标列表？

转载 作者：行者123 更新时间：2023-11-28 01:28:34 25 4
gpt4 key购买 nike

我目前正在考虑使用fabric.js用于在线手写识别系统。对于这样的系统，我需要将绘制的线作为线列表发送，其中每条线都是点列表。

因此，如果用户在 Canvas 上绘制了“x”，我希望得到这样的结果:

[
  // the first line was the one going from left bottom to right top:
  [{'x':228, 'y':92}, 
    {'x':229, 'y':90}, 
    {'x':230, 'y':88}, 
    {'x':232, 'y':86}, 
    {'x':235, 'y':84}, 
    {'x':238, 'y':81}, 
    {'x':243, 'y':76}, 
    {'x':248, 'y':70}, 
    {'x':256, 'y':64}, 
    {'x':265, 'y':58}, 
    {'x':275, 'y':52}, 
    {'x':285, 'y':46}, 
    {'x':295, 'y':39}, 
    {'x':307, 'y':33}, 
    {'x':317, 'y':28}, 
    {'x':328, 'y':23}, 
    {'x':334, 'y':19}, 
    {'x':341, 'y':14}, 
    {'x':348, 'y':9}, 
    {'x':352, 'y':7}, 
    {'x':353, 'y':6}, 
    {'x':354, 'y':5}, 
    {'x':354, 'y':4}
   ],
   // the second line was the one going from left top to right bottom
   [
    {'x':259, 'y':20}, 
    {'x':260, 'y':21}, 
    {'x':261, 'y':22}, 
    {'x':262, 'y':23}, 
    {'x':264, 'y':26}, 
    {'x':266, 'y':28}, 
    {'x':268, 'y':31}, 
    {'x':271, 'y':34}, 
    {'x':274, 'y':38}, 
    {'x':279, 'y':44}, 
    {'x':285, 'y':51}, 
    {'x':291, 'y':59}, 
    {'x':297, 'y':67}, 
    {'x':303, 'y':74}, 
    {'x':309, 'y':80}, 
    {'x':315, 'y':88}, 
    {'x':321, 'y':96}, 
    {'x':328, 'y':103}, 
    {'x':334, 'y':107}, 
    {'x':340, 'y':112}, 
    {'x':345, 'y':116}, 
    {'x':349, 'y':118}, 
    {'x':350, 'y':119}, 
    {'x':350, 'y':120}
    ]
]
  • 第一个列表中的第一个元素应该是首先绘制的点。
  • 对于 0 <= i < j:列表 j 中的每个元素都晚于列表 i 中的任何元素绘制。

问题:如何获得这样的线列表，其中每个列表都表示为点列表？我还可以获得一些“速度指示器”，例如每个点的时间属性？

我的尝试

<!DOCTYPE html>
<html>
<head>
    <title>Handwriting recognition example</title>
    <script src="all.min.js"></script>
</head>
<body>
    <canvas id="c1" width="800" height="450" style="border:1px solid black;"></canvas>
    <script>
        var canvas = new fabric.Canvas('c1');
        canvas.isDrawingMode = true;
    </script>
</body>
</html>

似乎所有自由绘制的线条都作为 fabric.Path 的列表存储在 canvas._objects 中。这是正确的吗？

相关属性似乎是:

  • top:这似乎是路径的偏移量。
  • 宽度:这有什么用？
  • path:这是单条线的点列表吗？这似乎是一个列表的列表。元素的含义是什么？每个子列表似乎都以 M、Q 或 L 开头，其中 M 似乎是第一个元素，L最后一个和Q之间的所有内容(M=moveto，Q=二次贝塞尔曲线，L=lineto, source )。第一个和最后一个仅包含 2 个数值，其间的所有点都有 4 个数值。我猜这 2 个数值是 x/y 坐标。但是另外两个坐标是什么意思呢？

注意

如果您向我展示了使用手绘图导出不使用 Fabric.js 的点/线的可能性，那也很好。但触摸屏必须与该解决方案配合使用!

最佳答案

这是一种不同的方法，但可能有助于实现您的目标:

var canvas = new fabric.Canvas('c',{backgroundColor: 'rgb(200,200,200)'});
canvas.isDrawingMode = true;
var rect = new fabric.Rect();

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  startRecording();
});

var lines = [];


function startRecording(){
    var line = [];
    canvas.on('mouse:move', recordMoment);
    canvas.on("mouse:up", stopRecording);

    function recordMoment(event){
        line.push({x: event.e.x, y: event.e.y});    
        console.log(event.e.x + " " + event.e.y);    
    }
    function stopRecording(){
        lines.push(line);
        canvas.off('mouse:move', recordMoment);
        canvas.off("mouse:up", stopRecording);
    }
}

http://jsfiddle.net/B5Ub9/4/

此代码不是分析屏幕上存在的曲线，而是记录用户在 Canvas 上绘制线条时的触摸位置。

编辑添加了 isDrawingMode 以在 Canvas 上显示线条。

关于javascript - 如何将自由绘制的线条作为线条列表获取，其中每条线条都是坐标列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22423791/

25 4 0
文章推荐： html - 我可以编辑 Django 管理屏幕来显示我的 html 吗？
文章推荐： javascript - querySelectorAll 和 getElementsBy* 方法返回什么？
文章推荐： css - Bootstrap 列在悬停时放大(如 Netflix)
文章推荐： javascript - 如何等待方向服务完成才能访问方向显示的方向属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com