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 路径:

例子

此处查看示例

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux文件系统和日志分析

一、inode表结构 1. inode表 inode号在同一个设备上是唯一的。 inode号是有限资源&#xff0c;它的大小和磁盘大小有关。 访问文件的基本流程 根据文件夹的文件名和inode号的关系找到对应的inode表&#xff0c;再根据inode表&#xff08;属主 属组&#xff09;当中的指针找到磁…

基于SSM的校内信息服务发布系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

NX/UG二次开发—C\C++开发单个DLL支持多版本NX一种方法

1、去除附加包含目录下的NX相关的lib文件&#xff1a; 2、从对应的dll导出ufun函数和NXopen函数&#xff1a; libufun.dll; libufun_cam.dll; libufun_cae.dll; libufun_die.dll; libufun_vdac.dll; libufun_weld.dll; libugopenint.dll; libugopenint_cae.dll; libugopenint_…

电子版报刊怎么制作

制作电子版报刊是许多媒体和出版机构正在探索的一种新的出版方式。随着数字技术的不断发展&#xff0c;电子版报刊已经成为了一种越来越受欢迎的选择。那么&#xff0c;如何制作电子版报刊呢&#xff1f; 首先&#xff0c;你需要确定你的报刊的主题和受众。这将帮助你选择适合的…

KPU特征识别

前面的颜色识别、二维码识别都是使用了一些简单的图像处理功能&#xff0c;而更高 级的机器视觉就需要使用 KPU 。可以简单类别为计算机的 GPU &#xff08;显卡&#xff09;&#xff0c;本质是 实现高速的图像数据运算 我们来简单介绍一下 K210 的 KPU 。 KPU 是 K21…

Cadence记录

第三讲原理图的绘制和后续处理 一、绘制原理图 1.同一个页面内创建电气互联 连线方式2种 使用连线(wire) 使用网络名&#xff08;net alias&#xff09; 检查网络是否连接&#xff0c;如图显示则好着 2.不同页面之间创建电气互联 左右之分&#xff0c;表示在这个页面的信号是…

锁原理剖析-LockSupport工具类

LockSupport工具类 JDK中的rt.jar包里面的LockSupport是个工具类&#xff0c;它的主要作用是挂起和唤醒线程&#xff0c;该工具类是创建锁和其他同步类的基础。 LockSupport类与每个使用它的线程都会关联一个许可证&#xff0c;在默认情况下调用LockSupport类的方法的线程是不…

第2章 JavaScript基本语法

学习目标 了解什么是变量&#xff0c;能够说出变量的概念 掌握变量的命名规则&#xff0c;能够为变量命名 掌握变量的声明与赋值&#xff0c;能够声明变量并为其赋值 熟悉数据类型的分类&#xff0c;能够说出JavaScript中有哪些数据类型 掌握常用的基本数据类型&#xff0c…

【经验分享】如何看论文的分区、SCI检索号、EI检索号等信息

0 前言 一般而言&#xff0c;被SCI检索的论文&#xff0c;都会同时被EI检索。我们以论文《Learning Disentangled Representation for Multimodal Cross-Domain Sentiment Analysis》为例&#xff0c;讲解一下如何查询论文的各项信息。 我们首先百度这个论文 可以看到它是发表…

什么是企业数字化转型?数字化的价值体现在哪里?

从2015年接触平安的数字化转型&#xff0c;到2021年承接阿里云的服务数字化项目&#xff0c;再到2023年主导大大小小10来个数字化项目&#xff0c;8年的时间&#xff0c;数字化对我而言已经从一个“新词”变成了一个“旧词”。 8年过去&#xff0c;数字化也从一道企业的“选做…

轻松学会电脑如何录制音频

随手录音&#xff0c;保留证据以便后续出现问题进行判定&#xff0c;或者保存会议音频记录方便后续根据录音内容整理自己会议记录不足之处等等&#xff1b;越来越多的地方需要用到录音&#xff0c;那么在电脑上该如何进行音频录制呢&#xff1f;特别是使用比较广泛的Windows电脑…

基础算法【解题思路】:单链表的倒数第k个节点

定义指针p1&#xff0c;让p1走k步&#xff1a; 定义指针p2&#xff0c;在p1走了k步的时候&#xff0c;p2也跟着走。 p1走到最后的时候走了n-k步&#xff0c;停留在最后的null结点。 P2从头结点开始&#xff0c;也跟着走到了n-k步&#xff0c;而n-k恰好是倒数第k个节点。 例…

【Axure高保真原型】日期天数加减计算器

今天和大家分享日期天数加减计算器的原型模板&#xff0c;我们通过这个模板选择指定日期&#xff0c;然后填写需要增加或者减少的天数&#xff0c;点击确认按钮后&#xff0c;就可以计算出对应的结束日期&#xff0c;本案例提供中继器版的日期选择器&#xff0c;以及JS版的日期…

mybatisPlus 将List<String>字段转成json字符串,使用JacksonTypeHandler以及自定义类型处理器实现

文章目录 场景使用JacksonTypeHandler实现类型转换自定义StringListTypeHandler处理器实现 场景 项目中经常需要将List转成json存储到配置文件中, mybatisPlus默认实现了JacksonTypeHandler&#xff0c;GsonTypeHandler&#xff0c;FastjsonTypeHandler&#xff0c;也可以自定义…

@Transactional注解的一个很容易被忽略的错误用法

Transactional注解的一个很容易被忽略的错误用法 今日审查代码时发现对Transactional注解的一个如下用法&#xff1a; //StockController.javaAutoWired private StockService stockService//商品出库 PostMapping("/product/stock/out-stock") public Boolean pro…

利用 hexo 搭建 github page

默认我们已经安装了 node.js git 点击就可以下载啦 然后我们在本地新建一个文件夹&#xff0c;我取的名字是Hexo_blog 然后在命令行处输入 或者 右键 点击 git bash here npm install -g hexo-cli 下一步进行Hexo 初始化和本地预览 初始化并安装所需组件&#xff1a; hexo in…

【Linux驱动】Pinctrl子系统 | GPIO子系统 | 基于子系统的LED驱动程序

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《Linux驱动》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f6f7;Pinctrl子系统&#x1f945;设备树中的Pinctrl子系统 &#x1f6f7;GPIO子系统…

【漏洞复现】Hikvision SPON IP网络对讲广播系统任意文件上传

漏洞描述 IP网络对讲广播系统是一种基于IP网络的高效、可靠、智能的通信解决方案。它支持全双工语音通信、单呼/多呼、组呼/广播等多种通信模式,可以实现跨地域、跨网络的实时通讯。该系统具有灵活的群组管理、智能化的调度和优先级控制功能,可以满足各种场景下的紧急通讯和…

海外動態IP代理地址在網路連接中的作用

海外動態IP代理地址在確保更安全的流覽體驗方面發揮著重要作用&#xff0c;因為線上隱私和安全是最重要的問題。代理地址充當用戶設備和互聯網之間的仲介&#xff0c;提供多種好處&#xff0c;例如增強隱私、訪問地理限制內容以及提高網路性能等。 本文我們將深入探討一下海外…

如何用UE5 的小白人替换成自己的 metahumen 数字人

1、用QuixelBridge 插件导入制作好的metahumen数字人 2、创建项目时如有选择第三人称游戏&#xff0c;在内容目录中找到第三人称游戏小白人的蓝图类&#xff0c;对其进行复制一个&#xff0c;重命名&#xff0c;我这里命名为BP_METAHUMEN&#xff0c; 并移到Metahumen目录下方便…