【drawio笔记】素描风格

本文详述了如何在draw.io中应用素描风格,包括选择形状、启用Sketch样式、调整背景色以及如何自定义字体以匹配素描效果。通过添加Google Fonts中的手写风格字体MaShanZheng,实现整个图表的手绘风格统一。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【drawio笔记】素描风格

概述

本文简单介绍下在draw.io中如何使用素描风格。

我们在看其他人使用draw.io画图,会看到下图中这种素描风格,像是手写,手绘的形状,元素。

这是draw.io中提供一个Sketch(素描/草图)风格。

素描风格

如何使用

方法很简单,选中想要修改风格的形状,

选中形状

然后单击右侧样式里的Sketch选项。

sketch选项

就会看到风格改变了:

风格改变

到这样就已经完成了素描风格的改变。

这个时候可以再更改下背景色,让效果更明显。

背景色

我们选择这个淡蓝色,形状就会变成这样:

改变颜色

锦上添花

又会有人发现字体并没有变成素描风格,还是很单调,与背景的形状风格不相符。

原本的字体

Sketch选项只会影响图形,不会影响字体。要修改字体的风格,需要自行调整,更换一个有手写字体感觉的字体。但是draw.io默认的字体中并没有这种素描风格,选哪一个都没有手写字体的感觉。

原本的选项

这个时候我们可以使用字体的自定义功能。

自定义

我们可以选择使用新增System Fonts,Google Fonts,Web Fonts。

具体要选择添加的字体,根据个人喜好来,详细的新增字体方式可以查看drawio新增字体

这里我以使用Google Fonts的一个中文字体Ma Shan Zheng作为示例。

我们选择Google Fonts,然后填入Ma Shan Zheng

更改字体

单击应用完成添加。

这个时候会在字体选项中看到新增了一个字体Ma Shan Zheng

新增谷歌字体

这个时候就可以使用该字体了。

使用新字体

现在整个字体风格也就变成了手写风格,与背景的素描风格更加匹配了。


本文链接:https://blog.csdn.net/u012028275/article/details/118878741

### 如何将Drawio集成到项目中 为了将Drawio成功集成至项目,需了解其开源特性及其与不同平台的兼容性。由于Drawio本身不完全鼓励成为其他产品的基础框架,但确实存在多种方式可以实现这一目标[^2]。 #### 下载并配置Drawio源码 首先,从GitHub上克隆Drawio项目,这是获取最新稳定版本的有效途径。具体操作涉及访问指定仓库地址,并按照标准流程完成代码库的拉取工作[^3]。 ```bash git clone https://github.com/jgraph/drawio.git ``` #### 编译部署过程 一旦获得源码之后,下一步就是将其导入IDE(如VSCode),并对环境变量、依赖项等进行适当设置以便顺利运行。此阶段可能涉及到Node.js等相关技术栈的支持。 #### 集成方案探讨 对于希望基于现有应用快速添加绘图能力而不必深入修改核心逻辑的情况而言,考虑采用Tldraw 或者 Excalidraw这类轻量化替代品可能是更优的选择;然而如果坚持选用Drawio,则可探索API接口调用或是Web组件嵌入等方式来达成目的。 #### 实现在线协同编辑功能 考虑到实际应用场景中的多人协作需求,利用`drawon.cn`这样的第三方服务不失为一种简便高效的手段——它不仅全面继承了官方客户端的各项优点,还额外强化了云储存及实时互动方面的表现力[^4]。 --- ### 使用Drawio进行项目开发的最佳实践 当决定把Drawio融入日常工作中时,建议遵循如下几点指导原则: - **保持更新**:定期同步上游改动以享受最新的特性和修复。 - **文档记录**:维护详尽的技术笔记有助于后续维护人员理解架构决策背后的原因。 - **安全考量**:确保所选托管位置具备足够的隐私保护措施,特别是在处理敏感数据的情况下。 - **性能优化**:针对特定业务场景定制化调整参数设定,从而提高加载速度和响应效率。 --- ### Drawio项目集成教程概览 本节提供了一个简化版指南用于帮助初次接触该领域的开发者顺利完成初步搭建任务: 1. 获取资源文件; 2. 安置合适的工作区; 3. 执行必要的初始化命令; 4. 测试基本交互是否正常运作; 5. 探索更多高级选项的可能性。 以上步骤并非固定不变,可根据个人喜好灵活调整顺序或增减内容。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值