ImageGrabber

PS 钢笔与魔棒工具
授权协议 未知
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 国产
投 递 者 后学
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Image Grabber 是一个使用 Canvas 技术实现的 PS 钢笔与魔棒工具。在线演示

操作说明:

  1. 拖拽图片到浏览器窗口

  2. 使用+和-进行缩放

  3. 魔棒工具点击图片,使用Delete/Backspace键可以删除所选的像素

  4. 钢笔工具绘制一个路径,按选项面板的Mask按钮可以只显示路径内的图像

  5. 使用钢笔工具时可以配合Option/Alt键来操作节点和控制杆

  6. 点击Save按钮会将当前画布状态输出成图片

实现说明:

  • 魔棒工具的算法使用的是Flood Fill,用了Web Workers来做计算,尽可能保证界面的响应

  • 蚁线参考Code Pen这个示例。当图像缩放到尺寸较大时有渲染性能问题

  • 钢笔工具为了方便判断,直线去曲线都是用bezierCurveTo方法来绘制,借鉴了Photoshop的交互,简化了组合键和选择交互

  • Mask遮罩选项使用Canvas Global Composite Operation提供的destination-in方式来绘制

 相关资料
  • 用钢笔工具绘制直线段 使用 “钢笔 ”工具可以绘制的最简单路径是直线,方法是通过单击 “钢笔 ”工具创建两个锚点。继续单击可创建由角点连接的直线段组成的路径。 单击钢笔工具将创建直线段。 1选择钢笔工具。 2将钢笔工具定位到所需的直线段起点并单击,以定义第一个锚点(不要拖动)。注:单击第二个锚点之前,您绘制的第一个线段将不可见。(在 Photoshop 中选择 “橡皮带 ”选项以预览路径段。)此外

  • 当使用钢笔工具时,很难绘制路径,除非画布上有锚点。从 Illustrator CC 2014 版开始,“钢笔工具”会显示路径预览,即前一个锚点到指针当前位置的绘制路径。 使用钢笔工具单击一次画板绘制平滑点,并拖动鼠标以按要求创建手柄。 注意:当您使用钢笔工具绘制平滑点时,反向手柄始终相等且成对。拖动平滑点手柄时按住 Cmd/Ctrl 可创建长度不等的手柄(配对保持不变)。 松开鼠标按钮。当您在画板

  • Photoshop 提供多种钢笔工具以满足您的使用案例和创意样式: 通过弯度钢笔工具,可以直观地绘制曲线和直线段。 标准钢笔工具可用于精确绘制直线段和曲线。 自由钢笔工具可用于绘制路径,就像用铅笔在纸上绘图一样。 磁性钢笔选项可用于绘制与图像中定义的区域边缘对齐的路径。 使用 Shift+ P 组合键可循环切换钢笔组中的工具。 使用 Shift+P 组合键可循环切换钢笔工具 可以组合使用钢笔工具和

  • 使用钢笔工具绘制 用钢笔工具绘制直线段 使用"钢笔"工具可以绘制的最简单路径是直线,方法是通过单击"钢笔"工具创建两个锚点。继续单击可创建由角点连接的直线段组成的路径。单击钢笔工具将创建直线段。 选择钢笔工具。 将钢笔工具定位到所需的直线段起点并单击,以定义第一个锚点(不要拖动)。 注意:单击第二个锚点之前,您绘制的第一个线段将不可见。(在 Photoshop 中选择"橡皮带"选项以预览路径段。)

  • 使用钢笔工具绘制 用钢笔工具绘制直线段 使用钢笔工具可以绘制的最简单路径是直线,方法是通过单击钢笔工具创建两个锚点。继续单击可创建由角点连接的直线段组成的路径。单击钢笔工具将创建直线段。 选择钢笔工具 ()。 将钢笔工具定位到所需的直线段起点并单击,以定义第一个锚点(不要拖动)。 注意: 单击第二个锚点之前,您绘制的第一个线段将不可见。 如果显示方向线,则表示您意外拖动了钢笔工具;请选择编辑 >

  • 问题内容: 我一直在尝试使用Path2D类和鼠标侦听器为Java绘图程序创建钢笔工具,但结果令人困惑。该工具将工作几秒钟,但随后整个应用程序将冻结,必须关闭。(这里没有例外;程序只会冻结)。这是一个说明问题的SSCCE: 我编写了自己的类,在这里可以很好地工作,但是我想在Path2D类中使用一些其他功能。 我在这里做错什么了吗?还是Path2D无法执行我想做的事情? 任何帮助将不胜感激。 问题答案

  • 本文向大家介绍Python中的__new__与__init__魔术方法理解笔记,包括了Python中的__new__与__init__魔术方法理解笔记的使用技巧和注意事项,需要的朋友参考一下 很喜欢Python这门语言。在看过语法后学习了Django 这个 Web 开发框架。算是对 Python 有些熟悉了。不过对里面很多东西还是不知道,因为用的少。今天学习了两个魔术方法:__new__ 和 __

  • 网址:https://wanxiang.aliyun.com/app/virtual-model 如图,当前vue项目,求详细实现方式