Rough.js:创建手绘、草图外观的图形

Rough.js 是一个小型的(<9kB gzipped)图形库,它可以让你以草图、手绘风格进行绘制。 该库定义了绘制直线、曲线、圆弧、多边形、圆和椭圆的基元。它还支持绘制 SVG 路径。

Rough.js 可以同时处理 Canvas 和 SVG。

安装

从npm安装:

npm install --save roughjs

并在代码中使用它:

import rough from 'roughjs';

用法

查看完整的 Rough.js API 可以在 Github 上找到。

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

或SVG

const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
svg.appendChild(node);

直线和椭圆

rc.circle(80, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
rc.line(80, 120, 300, 100); // x1, y1, x2, y2

填充

rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {fill: "rgb(10,150,10)",fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {fill: 'red',hachureAngle: 60, // angle of hachure,hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {fill: 'rgba(255,0,200,0.2)',fillStyle: 'solid' // solid fill
});

填充样式可以是:钩形(默认)、实线、之字形、交叉线、点、日晕、虚线或之字形线。

素描风格

rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG路径

rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });

简化后的 SVG 路径:

例子

此处查看示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PDF密码】PDF文件为什么无法修改?为什么PDF文档不支持编辑?

pdf文件大家应该都经常接触&#xff0c;但是不知道大家会遇到这种情况&#xff1a;有些PDF文件打开之后无法编辑&#xff1f;是什么原因呢&#xff1f;今天我们来分析一下都是那些原因导致的。 首先我们可以考虑一下&#xff0c;PDF文件中的内容是否是图片&#xff0c;如果确认…

中国社科院大学与美国杜兰大学金融管理硕士项目——熬过寒冬,春日暖阳已不远

在金融领域&#xff0c;寒冬似乎成了无法避免的阶段。然而&#xff0c;对于那些坚守岗位的金融从业者来说&#xff0c;熬过寒冬并非无望。正如冬去春来&#xff0c;只要我们采取明智的策略&#xff0c;迈出坚定的步伐&#xff0c;春日的暖阳已在不远方照耀。社科院与美国杜兰大…

Vue2x的自定义指令和render函数使用自定义指令

在某些情况下&#xff0c;我们需要对底层DOM进行操作&#xff0c;而内置的指令不能满足需求&#xff0c;就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义&#xff0c;钩子函数会接收到指令所绑定的元素作为参数。 定义指令 常用两种方式进行…

工作需要你的陪伴

初识CSDN 工欲善其事&#xff0c;必先利其器&#xff0c;要做好工作&#xff0c;先要使工具锋利&#xff0c;才能事半功倍。2019年开始学习编程的时候&#xff0c;总会遇到各种问题&#xff0c;都是英文看不懂&#xff0c;没办法只能百度搜索&#xff0c;当时搜索引擎排名靠前的…

只有金蝶用户,才懂金蝶BI方案的含金量

资深金蝶系统用户都看得明明白白&#xff0c;金蝶系统侧重于企业资源的计划和管理&#xff0c;而当前企业数字化运营决策不仅需要高效合理的流程管理&#xff0c;更需要一套完善的数据分析方案&#xff08;金蝶BI方案&#xff09;&#xff0c;无缝对接金蝶系统&#xff0c;智能…

Spring MVC 的RequestMapping注解

RequestMapping注解 使用说明 作用&#xff1a;用于建立请求URL和处理请求方法之间的对应关系。 出现位置&#xff1a; 类上&#xff1a; 请求 URL的第一级访问目录。此处不写的话&#xff0c;就相当于应用的根目录。写的话需要以/开头。它出现的目的是为了使我们的 URL 可以…

Python类型转换,数据类型转换函数大全 与 strip()函数介绍

Python类型转换&#xff0c;数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() 函数…

Linux备忘手册

常⽤命令 作⽤ shutdown -h now 即刻关机 shutdown -h 10 10分钟后关机 shutdown -h 11:00 11&#xff1a;00关机 shutdown -h 10 预定时间关机&#xff08;10分钟后&#xff09; shutdown -c 取消指定时间关机 shutdown -r now 重启 shutdown -r 10 10分钟之后重启 shutdown -…

第八讲_css定位

css定位 1. css定位介绍2. 静态定位&#xff08;static&#xff09;3. 相对定位&#xff08;relative&#xff09;4. 绝对定位&#xff08;absolute&#xff09;5. 固定定位&#xff08;fixed&#xff09;6. 粘性定位&#xff08;sticky&#xff09; 1. css定位介绍 在 css 中…

006集 正则表达式 re 应用实例—python基础入门实例

正则表达式指预先定义好一个 “ 字符串模板 ” &#xff0c;通过这个 “ 字符串模 板” 可以匹配、查找和替换那些匹配 “ 字符串模板 ” 的字符串。 Python的中 re 模块&#xff0c;主要是用来处理正则表达式&#xff0c;还可以利用 re 模块通过正则表达式来进行网页数据的爬取…

18. 从零用Rust编写正反向代理, 主动式健康检查源码实现

wmproxy wmproxy是由Rust编写&#xff0c;已实现http/https代理&#xff0c;socks5代理&#xff0c; 反向代理&#xff0c;静态文件服务器&#xff0c;内网穿透&#xff0c;配置热更新等&#xff0c; 后续将实现websocket代理等&#xff0c;同时会将实现过程分享出来&#xff…

Python陷阱-如何安全地删除列表元素?

一个常见的任务是在一个列表上迭代&#xff0c;并根据条件删除一些元素。本文将展示如何完成该任务的不同方法&#xff0c;同时展示一些需要避免的陷阱。 假设我们需要修改列表a&#xff0c;并且必须删除所有不是偶数的项。首先实现辅助函数even(x)来确定一个数字x是否是偶数: …

LT8911EX LVDS 转 eDP

概述 Lontium LT8911EX 是 LVDS 至 eDP 转换器&#xff0c;具有单端口或双端口可配置 LVDS 接收器&#xff0c;具有 1 个时钟通道和多达 8 个数据通道&#xff0c;每个数据通道的最大工作速率为 1.2Gbps&#xff0c;最大输入带宽为 9.6Gbps。该转换器对输入LVDS数据进行反串行…

商用净水器行业分析:到2025年市场零售规模将接近500亿元

商用净水器与家庭净水器相差无几&#xff0c;只是出水量大小不同。一般商业净水器都采用中央净水器和集成净水器这两种&#xff0c;这样不仅可以解决工业用水&#xff0c;还可解决工人日常饮用水、沐浴用水和洗涤用水等生活用水问题。 目前我国中央水处理整机依然处于市场发展的…

【小黑嵌入式系统第十四课】μC/OS-III程序设计基础(三)——信号量(任务同步资源同步)、事件标记组(与或多个任务)

上一课&#xff1a; 【小黑嵌入式系统第十三课】PSoC 5LP第二个实验——中断控制实验 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能 文章目录 1 信号量1.1 简介1.2…

DNS:解析互联网的“导航系统”

引言&#xff1a; 在互联网时代&#xff0c;我们每天都在使用各种网站和服务&#xff0c;但很少有人真正了解这些网站和服务是如何被找到和访问的。这背后有一个被称为DNS&#xff08;域名系统&#xff09;的“导航系统”&#xff0c;它负责将人类可读的域名转换为计算机可识别…

学习笔记之——3D Gaussian Splatting源码解读

之前博客对3DGS进行了学习与调研 学习笔记之——3D Gaussian Splatting及其在SLAM与自动驾驶上的应用调研-CSDN博客文章浏览阅读450次。论文主页3D Gaussian Splatting是最近NeRF方面的突破性工作&#xff0c;它的特点在于重建质量高的情况下还能接入传统光栅化&#xff0c;优…

对比两个json对象有那几个字段被修改,并返回有改动的字段内容

如果您想比较两个 JSON 对象&#xff0c;找出哪些字段发生了变化&#xff0c;并返回发生变化的字段及其新的值&#xff0c;您可以编写一个函数来递归比较对象。以下是一个 TypeScript 示例&#xff1a; type JSONValue string | number | boolean | null | JsonObject | Json…

LNMP平台对接redis服务

目录 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 4、修改 php 配置文件 5、测试连接 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 官网&#xff1a;http://redis.io/ 下载包&#xff1a; https://codeload.github.com/phpredis/p…

C++:常量

const的最初动机 const的使用方法 使用const的好处是允许指定一种语义上的约束&#xff0c;即某种对象不能被修改&#xff0c;且由编译器具体实施这种约束。 const声明格式&#xff1a;const 类型名 对象名;修饰普通变量&#xff0c;时期不能被随意修改 【注意】1.C中的const…