知无涯

本文分享了使用Paper.js实现贝塞尔曲线绘制与编辑的技术方案。文章首先讨论了AI时代生产力提升带来的职业思考，随后重点介绍了通过Paper.js的Tool工具实现鼠标交互绘制贝塞尔曲线的方法，包括创建Path对象、处理Segment控制点等关键技术。同时详细说明了曲线编辑功能，利用hitTest实现元素命中检测，支持对曲线段、控制柄等不同元素的交互操作。作者还分享了学习Paper.js源码的体会，并透露了近期参加系统架构师考试的经历，虽未通过但积累了宝贵经验。最后强调了健康管理的重要性。

本文对比了四种误差扩散抖动算法（Floyd-Steinberg、Stucki、Jarvis-Judice-Ninke、Atkinson）的关键特性。从噪点表现看，Jarvis最平滑，Atkinson保留高频细节但颗粒感明显；扩散范围上，Floyd计算量最小（4邻域），Jarvis/Stucki更精细（12邻域）。激光雕刻场景中，Floyd适合高速雕刻，Jarvis可防材料灼烧，Atkinson具有艺术化效果。综合建议：肖像用Jarvis/Stucki，艺术效果选Atkinson，文字/LOGO用Floyd，

本文介绍了使用fabric.js实现图像编辑功能的技术方案。作者选择利用fabric.js内置的丰富滤镜功能，并详细解析了自定义滤镜的实现方法。文章重点分析了WebGL滤镜的工作原理，通过GLSL着色器语言实现GPU加速处理，并提供了创建二值化滤镜的完整代码示例。此外，还介绍了颜色矩阵滤镜的实现方式，展示了fabric.js在图像处理方面的高效性和灵活性。作者通过实际案例，分享了从技术调研到具体实现的经验总结。

摘要：图形编辑器中的矢量文本功能开发实践 本文分享了在图形编辑器中开发矢量文本功能的实践经验。作者首先通过OpenType.js将文本转换为矢量元素实现基本功能，随后重构实现了更复杂的文本排版交互。文章深入解析了字体文件的结构，包括字符映射表、字形数据等核心组成部分，并通过代码示例展示了如何获取字符的坐标和位置信息以确定包围盒。此外，还探讨了文本坐标系建立、光标交互实现等关键技术点，并指出多语言支持、排版细节等后续开发方向。这些非主流的专业知识为特定领域开发者提供了有价值的参考。

本文介绍了gcode运动仿真功能的开发过程。针对现有软件(Lightburn、Xtool)无法直观展示gcode运动轨迹和起点终点的问题，作者提出了一种解决方案：先将图元转换为gcode，再将gcode解析为格式化数据，最后在canvas上绘制运动轨迹。技术实现包括gcode解析(处理坐标模式、特殊指令等)和基于格式化数据绘制线段(用不同颜色区分雕刻和空走)。文章展示了仿真效果图，并指出在处理大规模gcode时需要考虑性能优化。该功能有助于调试gcode和查看雕刻效果。

对于组合功能，我们首先要获取选中元素中的所有有效元素，利用getItems方法，来获取 path，shape，取到后再添加到一个新的group里，并设置好子元素的标识和 group的标识。通过为父元素增加明显的标识，在点中时，获取子元素，检查该元素是否有子元素的标识，如果有子资源的标识，那么就一直向上找，找到具有整体标识的元素，一般是一个 group，或者复合路径。当用户导入一个球svg时，它会被当作一个整体被选择，如果你想单独调整其中的某一部分，可以选中它，然后点击拆分，就将一个整体拆分成了多个线条。

最近令人高兴的是，我的教资面试通过了，嘻嘻…下面简单说一下技术方案，在分析填充的雕刻图层时，需要将该图层的所有元素组装起来，这里的组装我使用的复合路径，也就是SVG中的Path标签，也就是将图层中所有图元转换为一个Path路径。如果你在填充图层中画了两个图形，一个圆，一个矩形，如果这两个图形不相交，也不存在任何包含关系，那么你在加工后，你会得到一个填充的矩形和一个填充的圆。在lightburn中，对于填充图层，有这样一个隐藏的逻辑，那就是，在加工时，填充规则是以填充图层的所有元素进行计算的，什么意思那？

本篇文章我们来聊一下 利用web摄像头进行定位的功能，之前写了一篇文章 https://fizzz.blog.csdn.net/article/details/144701707，这篇算是哪一篇的补充和完善。在做完第一版的摄像头的定位功能后，一直有用户反馈，用于定位的图片太模糊。

然后就画1天写了一个demo，元素旋转后，点击按钮，生成一个新的图像，并且不携带其他元素。这看似很简单的一个功能，其实设计很多东西，包括变换矩阵，元素的旋转中心，canvas的旋转中心为原点，然后是canvas旋转图片，然后还有就是图片的尺寸，原图的尺寸，原图旋转后的外接矩形尺寸，唉…最近发现ts有一个比较大的问题，就是，图片有旋转后，生成的gcode依然是不旋转的图像，于是排查了一些代码，发现使用的是原始图像的imagedata，唉，感觉好头疼。json.src 就是原图旋转后的图片，而且是原始尺寸的。

时，虽然保留了变换信息（旋转、缩放），但几何数据（如路径点）的坐标是相对于本地坐标系的。如果直接读取这些坐标，它们没有经过变换矩阵的转换，因此位置不准确。属性控制变换矩阵（平移、旋转、缩放等）的应用方式。它的行为对元素的坐标系统和属性访问有深远影响。时，需手动应用变换矩阵到本地坐标，才能得到准确的世界坐标。和手动坐标转换，可以同时保留变换信息并获取准确的位置数据。在 Paper.js 中，

Unicode 是一个全球字符集标准，目的是为所有语言中的所有字符分配一个统一的编码。它把字符按照功能、语言或书写系统划分为“区段”，每个区段就是一个Unicode 范围。Unicode 范围字符示例用途A-Z, a-z拉丁基本字母А-Я, а-я西里尔字母（俄语、乌克兰语等）中、国、文常用汉字Α, β, γ希腊字母À, ç, ñ拉丁扩展-A（法语、西语等变音）😀, 😢Emoji所以你不需要按“语言”去处理字体，而是按“字符属于哪个 Unicode 范围”来选对应字体。✅。

本篇文章来讲一下 图像描摹的功能的实现。我们知道要雕刻图片可以通过分析图片的像素来生成相应的gcode进行雕刻，但如果你想要将图片转换为线稿进行雕刻，这个时候就要从图片中提取出 线稿。例如下面的图片：你想要获取到这个图片的线稿，如下图，是一个矢量的svg目前有一些js的方法可以从图片中获取线稿，首推的是这个库 https://github.com/kilobtye/potracepotrace.js。

比如视图的起点是27,17，而你的网格线间隔是10，那么你画网格线的起点可以是 30，20，也有是20，10。因为在小视图的情况下，画布上的网格线有可能非常多，每一条线都是一个对象，100条垂直线，100条水平线，还没开始创作，200多个对象，就已经吃了浏览器100多M的内存，这要是再导入一个700万像素的图片，内存随时都可能溢出。针对这个需求，我们有一个很简单的实现方案，就是在拖动画布的事件，缩放画布的事件里 将先前的网格线清空，然后再创建新的网格线，创建的网格线，只需要创建视图内的网格线即可。

整个技术实现思路是借助paperjs画布来实现的，将所有方格，字体，放在一个group中，并且每个元素都有自己的功率和速度。其实还有一种方案是，不记住画布，而是直接使用gcode拼接的方式，将每个方格，和固定字体的gcode都当作变量，然后调整其位置，最后进行拼接。材料测试矩阵在测试激光头在某一种材料上的表现，很有必要，如果你在一种新的材料上进行加工时，最好先做一次材料测试矩阵，挑选出合适的功率和速度。最近做了一个材料测试矩阵的需求，现在已经上线了，现在来回顾总结一下，有哪些做的好的，有哪些做的不好的。

但你会发现，设置false后，元素的真正位置是通过很多属性叠加确定的，这个时候你再直接使用元素的位置，是完全不正确的。教资考试，自第一次考试后，搁置了两年，眼看着考过的那一门成绩要过期了，才想起来冲一下，补考剩下的一门，这门考过了，还需要面试通过才能拿到教资证，虽然过程很漫长，也很忙碌，没关系，一步一步走就好啦。前段时间在雕刻图片时，旋转图片，翻转图片后，发现生成准确的gcode，虽然尺寸对，但是都是以没有旋转，没有翻转的图片进行生成的。前段时间梳理了今年要做的事情，唉，那真是的没法说，累死牛马也做不完。

同时监听textarea的这些事件 blur， keydown，keyup ，input ，copy ，cut ，paste ，compositionstart ，compositionupdate ，compositionend ，在这些事件的处理函数中，都需要将内容的修改，或者状态，同步到画布的文本元素上。在ITextKeyBehavior.ts 这个文件里有写到是使用的 一个隐藏的textarea来实现的 输入效果，包括选择，光标的上下左右移动，复制粘贴。每一字符都有一个索引，即使换行也不间断。

在图形编辑器中，我们有时需要这样的一个图形，或者这样的一个图形像这种图形其实是基于相交的圆和矩形进行计算得出来的，这种操作大家一般叫做图形的布尔操作。本片文章就教大家如何在图形编辑器中，实现 两个元素的差集，并集，合并，或者切割。学会了这个技能，你就可以基于一些基本元素，组合成千奇百怪的图形。下面就进入正题啦在paperjs提供的例子中，有一个关于元素布尔操作的复杂案例，就是下面这个这个案例将paperjs能够实现的5种布尔操作。分别是，其实还有一种reorient没有提到。

之前的文章我已经告诉大家如何做一个不随视图改变大小的圆，圆是最容易实现的，因为，使用缩放比计算半径就可以啦。矩形就稍微麻烦一些，视图缩放后需要对矩形进行反缩放，才能保证大小。在图形编辑器中，一般都会有标尺的功能，标尺工具，能够让用户建立清晰的坐标系，能够知道原点在那里，并且能够大致估算出，尺寸，距离，和当前光标所在的位置。对于画布的移动，更加简单只需调整上标尺中心点的y值，或者左标尺中心点的x值。这还不算难，难点在计算视图缩放后，矩形应该移动多少才能保持在屏幕的固定位置。标尺工具具有以下这样几个特性。

要做选择工具，就要先定义出来选择工具的功能范围和职责。你可以打开ps，或者figma，或者其他的图形化软件工具，不管是在线的还是客户端。当前你选中了选择工具后，那么下一次点击画布时，就会判断你的点击点是否在一个元素上，包括内部，线框上。当你点击元素时，那么该元素就会被选择，被选中的元素通常会显示该元素的位置，尺寸，等基本信息，有些特殊元素还有其他的编辑功能，比如图片。当你点击画布后，不放开鼠标，并拖动鼠标，那么就会进入一个框选状态，起点与光标点组成一个矩形，将矩形中，或与矩形相交的元素 选中。

绝对坐标相对简单一些，因为每个元素的加工坐标都是绝对的，但是相对坐标的加工就依赖上一个元素，有时是依赖上一个图层。然后将这些坐标传入worker， 坐标必须是原始数据，不能是paperjs的元素，worker中也无法使用paperjs的能力。如果要使用worker的能力，首先需要获取所有的加工点，借助paperjs来获取元素的坐标，另外就是由于是异步的，如果gcode不是一次性返回的，那么gcode必须被插入到合适的位置。最后最难的是，在异步中 无法取得 相对定位的 前一个坐标。由于worker是异步的，

做法就是缓存起来空走的那行gcode，当下次需要插入gcode时，判断上前面的白色行是否时奇数，奇数就把之前缓存的gcode 插入，再插入本次的gcode。由于使用的是相对位置坐标，那么在遭遇到连续的，奇数行的白色行时，需要将处理一下坐标起点。在使用图片生成gcode时，遇到连续的白色行（一整行都是白色像素，不进行雕刻）。

通过一个详细的示例，我们将探索如何使用 Paper.js 进行数学图形（正弦曲线、余弦曲线和螺旋线）的绘制，并实现固定尺寸的圆形及其随视图缩放的调整。这不仅为开发者提供了一个高效的图形处理工具，也为创建动态和互动的Web应用打开了新的可能性。函数调整视图的缩放，并重新计算圆的半径，以确保其在屏幕上的尺寸不受缩放影响。这利用了 Paper.js 的坐标变换功能，通过当前的缩放级别调整圆的半径。固定尺寸的圆的绘制与其在视图缩放时的尺寸调整是本案例的一大亮点。的使用则允许通过拖动来平移视图。

本案例代码不仅展示了如何使用 Paper.js 实现基本的图形动画和用户交互，还演示了如何通过网络接口扩展控制功能。通过结合这些技术，开发者可以创建丰富而动态的 Web 应用，提升用户体验和应用的互动性。

背景对于弯曲的三条平行线，一开始我以为只需要使用中心线，然后复制两条，一个向右下角平移，一个向左上角平移，就能让三条线实现完全平行，每一处的距离都相等。后来仔细思考后，发现我想错了，因为弯曲处的平行距离是，x移动，y移动的平方根。后来想使用曲线的缩放加上平移来实现三条线段弯曲平行，曲线部分依然无法达到完全平行。最后请教了ChatGPT，对于曲线的平行线，要使用切线加法线的方式来确定。法线的距离就是平行距离。具体就是获取曲线部分上的每一个点，然后求出该点的切线向量，然后再求出切线的法线，法线延长平行距离

在现代Web开发中，字体处理和自定义显示成为了视觉设计的重要部分。本文将详细探讨如何使用Paper.js和Opentype.js在HTML5 canvas上实现自定义字体的加载与显示。我们将通过分析一段实际代码来理解关键技术实现及其难点。

如svg的g标签转换为group，rect标签转换为shape，一些符合元素转换为CompoundPath对象，内部其实是Path对象组成的。将提供的SVG内容转换为Paper.js项目中的图形项，并将其添加到此项目的活动层中。请注意，首先不会清除项目。最外层是一个group，然后会有很多子元素，一些svg的元素会被转换为paperjs画布中的元素。导出svg，你可以将一个元素导出成svg，也可以将一整个项目导出成svg。在这里，我们将导出的JSON对象保存到了本地存储中，便于后续的导入操作。

在Web开发中，利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。Paper.js是一个强大的矢量图形库，可以让开发者通过简洁的API完成复杂的图形操作。在本文中，我们将详细探讨如何使用Paper.js来实现对画布的缩放和拖动功能，提供用户友好的交互体验。事件中，我们计算从上一次事件到当前事件鼠标移动的差值，并相应地调整视图中心，实现拖动效果。是将鼠标的屏幕位置转换为画布上的坐标，确保缩放操作围绕鼠标当前位置进行。事件中，我们记录了鼠标点击的位置，并开始跟踪拖动状态。

本文通过详细解析一个简单的 Paper.js 示例，展示了如何利用基本的图形库功能来创建一个用户友好的绘图应用。这些技术点不仅包括图形的绘制，还涉及到对用户输入的实时响应和控制，是现代Web图形应用的基石。通过这种方式，开发者可以构建更复杂的图形处理工具，进一步探索 Paper.js 提供的丰富功能和可能性。

使用Paper.js库提供的工具和方法，开发者可以快速实现一个响应式和功能丰富的绘图应用。这不仅增强了Web应用的用户交互性，也大大降低了实现复杂图形处理功能的开发难度。通过这样的工具，我们能够提供更丰富的用户体验，满足从艺术到工程各种不同领域的需求。

通过这个简单的示例，我们展示了如何使用Paper.js来处理复杂的图形绘制需求。这种方式不仅允许用户灵活地绘制椭圆，还能通过简单的修改（如按下Shift键）快速地切换到圆形绘制模式。这种灵活性和易用性使得Paper.js成为处理在线图形设计的理想选择，无论是用于艺术创作、游戏设计还是任何需要图形绘制的应用。通过优化这些基本操作，开发者可以创建出更加丰富和互动的Web应用。

我们写的这个案例，它不仅使得矩形可以从任意方向精确地绘制，还能通过简单的逻辑处理如按Shift键约束为正方形，增强了用户的交互体验。最终，这个示例展示了如何有效利用JavaScript和HTML5 Canvas技术，通过Paper.js框架来实现高效且用户友好的图形处理解决方案。对于开发者而言，理解并应用这些技术可以在创建图形密集型应用时，提供更好的用户体验和性能优化。

paper.js 提供了两种编写方式，一种是纯粹的JavaScript编写，还有一种是使用官方提供的PaperScript。两者能实现同样的效果，但zoom是依据最原始的缩放比例，scale是依据当前的缩放比例。如果你先缩放0.5。区别就是在于，调用paper下的字对象是否需要加paper，以及向量的加减乘除。了解paper.js的基础知识，在往后的开发过程中会让你如履平地。导入svg有一些问题，特别是高精度的，小尺寸的复杂svg。说一下不擅长的东西，2d渲染，位图的处理有限。向量的除法，缩小向量的距离。

Paper.js 中的项目对象通常被称为文档：它是顶级对象，包含场景图中的所有项目。由于文档一词在浏览器上下文中已被使用，因此它被称为 Project。项目允许对应用于所有新创建项目的样式进行操作，允许访问选定的项目，在未来版本（不知道还会不会有）中还将提供在场景图中查询项目的方法，定义特定的要求，以及持久化和加载不同格式（如 SVG 和 PDF）的方法。使用访问当前的项目，可以存在多个项目。可以访问项目下的视图，图层，导入导出svg，或者使用一个Point来命中hitTest()元素。

总结懒得写了，就写一句话吧每个项目都很优秀，普通人掌握其中一个就能做出非常好的项目或作品。我们需要沉下心仔细研究。

3月份换了一份工作，开始一个人做一个图像编辑器的平台，从零开始，一个人开发。图形编辑器我是第一次接触，个人也比较感兴趣，所以在前期也作出了不少的成绩，最近下班也没什么好玩的东西，于是准备开个新的坑，写一个图形编辑器基于Paper.js教程。内容不会涉及任何商业机密。今天这篇就先这样吧，业余时间也会学一些硬件的东西，只是因为好玩，有意思。我认为有价值的东西基本都会写出来分享给粉丝。6月份的深圳，又闷又热，真是不想离开空调房啊。