tldraw白板组件

news2024/11/24 20:02:36

tldraw 是一个开源的白板组件,10行代码就可以将其接入到 React 项目中:

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

自定义字体

@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap");
@import url("tldraw/tldraw.css");

body {
  font-family: "ZCOOL KuaiLe";
}

修改组件字体

.tl-text {
  font-family: 'ZCOOL KuaiLe', sans-serif !important;
}

在这里插入图片描述
很强大,有兴趣的同学可以深入研究,同时支持多人协同。

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

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

相关文章

C#与工业自动化结合还有搞头吗?

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c#的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“666”之后私信回复“666”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01;当然有搞头&#xff01;C#是一…

自动化软件运行手机脚本需要用上的源代码!

在现今这个科技高速发展的时代&#xff0c;自动化软件运行手机脚本已经成为许多开发者、测试人员乃至普通用户提高工作效率的利器。 通过编写和执行手机脚本&#xff0c;我们可以实现自动化测试、数据抓取、任务批量处理等多种功能&#xff0c;本文将分享五段用于不同场景的自…

【LLM】一分钟带你了解Agent工作流四范式

文章目录 1. 大模型直接生成-generation2. 大模型充当工具使用-tool3. 大模型执行思维链-Planning4. 多大模型Agent合作-multiagent collaboration 1. 大模型直接生成-generation 通过提示词&#xff0c;大模型直接生成想要的结果&#xff1a; 2. 大模型充当工具使用-tool …

如何寻找暴利产品并通过整合产品资源变现

互联网上很多人都喜欢做暴利产品&#xff0c;这是人之常情&#xff0c;赚钱嘛&#xff0c;谁不希望一次多赚点。 说到暴利产品&#xff0c;那就不得不提微商&#xff0c;微商运营的本质是基于代理商进行用户的裂变&#xff0c;也就是说代理商越多&#xff0c;自然也就收割越多&…

24年了 直播带货的未来如何?

32 个国家在取消电商&#xff0c; 那我国的电商呢&#xff0c;首先电商是不会被取缔的。直播电商会被严格的控制&#xff0c;比如有一家饼店&#xff0c;它线下的销售是 3000 万&#xff0c;线上抖音的销售是 5, 000 万。 这一类型小而精又专业的品牌企业&#xff0c;未来在抖…

Excel 将某个序列随机重排 N 次

A 列是个随机序列&#xff0c;B2 格是参数&#xff0c;表示重排的次数。 AB1ItemsReplicates2A23B4C5D 要求将 A 列重拍 N 次 D1Result2C3D4B5A6D7A8B9C 使用 SPL XLL&#xff0c;输入公式&#xff1a; spl("?2.conj(?1.sort(rand()))",A2:A5,B2)"整数.()…

在数字化转型中,数字孪生技术的作用和价值几何?

引言&#xff1a;随着全球化和市场竞争的加剧&#xff0c;企业需要通过数字化转型来提高生产效率、优化产品质量、降低成本&#xff0c;以增强自身竞争力。企业需要通过数字化转型更好地理解客户需求&#xff0c;提供个性化、定制化的产品和服务&#xff0c;从而满足客户的多样…

java对word文档预设参数填值并生成

目录 &#xff08;1&#xff09;定义word文档模板 &#xff08;2&#xff09;模板二次处理 处理模板图片&#xff0c;不涉及图片可以跳过 处理模板内容 &#xff08;3&#xff09;java对word模板填值 &#xff08;4&#xff09;Notepad的XML Tools插件安装 工作上要搞一个…

75101A 1553B总线测试模块

75101A 1553B总线测试模块 75101A 1553B总线测试模块是单通道多功能&#xff0c;符合CPCI/PXI总线的标准3U尺寸模块&#xff0c;可同时用作BC、RTs和BM&#xff0c;其中BM具有比特误码、highbit、lowbit、highword、lowword、校验错误、消息错误检测以及最大256M字节的数据捕…

VBA技术资料MF168:移动工作表为单独工作簿

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

提高开发效率之——工具介绍

一 . SerialDebug 串口调试工具 SerialDebug 是一个串口调试工具&#xff0c;它主要用于帮助电子工程师和软件开发者进行串口通信的调试工作。以下是 SerialDebug 工具的一些主要作用和特点: 基础串口通信功能&#xff1a;提供打开、关闭、接收、发送数据的基础串口操作。 数…

python项目运营时,出现,redis用户密码未设置问题,排查解决

一、问题描述&#xff1a; 在本地化开发过程中&#xff0c;pythonDjango运行项目&#xff0c;redis为本地windows版本&#xff0c;在设置过密码后&#xff0c;仍然会出现pythonDjango运行项目&#xff0c;终端日志显示如下&#xff1a; INFO info信息 ERROR redis数据库异常[&…

内网部署Prometheus-server结合grafana

目录 1.提取依赖包 2.所有节点安装chrony服务 2.1集群角色规划 2.2 所有节点安装chrony服务 2.3添加hosts文件解析(服务端) 2.4修改时间服务器 ​编辑 2.5重启chrony服务&#xff0c;使得配置生效 2.6修改客户端配置&#xff08;注意是客户端其他节点&#xff09; 2.…

韩语日常口语留学韩语旅游韩语口语柯桥语言培训

韩语每日一词打卡&#xff1a;행정적[행정적]【名词】行政 原文:나라는 항상 행정적 명령을 통해 경제운행을 조절합니다. 意思&#xff1a;国家经常通过行政命令去调节经济的运行。 【原文分解】 1、항상[항상]总是 &#xff0c;经常 2、나라[나라]国家 3、명령[명:녕]命令 …

使用AI机器学习,轻松解决化合物配比优化问题

为什么需要化合物配比的优化&#xff1f; 在化合物制造行业中&#xff0c;化合物的配比是产品质量控制的关键环节。 化合物制造流程 目前&#xff0c;这一过程高度依赖于材料专家和工程技术人员的经验&#xff0c;通过反复试验来验证产品性能&#xff0c;确保其满足市场和客户的…

Spring Boot 学习第八天:AOP代理机制对性能的影响

1 概述 在讨论动态代理机制时&#xff0c;一个不可避免的话题是性能。无论采用JDK动态代理还是CGLIB动态代理&#xff0c;本质上都是在原有目标对象上进行了封装和转换&#xff0c;这个过程需要消耗资源和性能。而JDK和CGLIB动态代理的内部实现过程本身也存在很大差异。下面将讨…

队列与循环队列

目录 1. 前言&#xff1a; 2. 队列 2.1 队列的概念 2.2 队列的实现 2.3 队列的声明 2.4 队列的初始化 2.5 队列的入队 2.6 队列的出队 2.7 队列获取队头元素 2.8 队列获取队尾元素 2.9 队列获取有效数据个数 2.10 队列判断是否为空 2.11 打印队列 2.12 销毁队列 …

机器发货到菲律宾的完整流程 广东智慧物流

机器发货到菲律宾的完整流程 广东智慧物流 &#x1f31f;【机器发货到菲律宾完全攻略】&#x1f31f; 机器发货到菲律宾的完整流程 广东智慧物流 为你整理了一份超详细的机器发货到菲律宾的攻略&#xff01;海运14天轻松到达&#xff0c;让你无后顾之忧&#xff01;&#x1f…

【编译原理】总览

1 字母表 字母表&#xff1a; 用∑表示&#xff0c;它是一个有穷符号集合 符号&#xff1a;字母、数字、标点符号... 例如&#xff1a;二进制字母表为{0&#xff0c;1}&#xff0c;ASCII字符集 2 字母表的运算 字母表上的乘积&#xff1a; ∑1∑2{ab | a属于∑1&#xff0c;b…

MySQL—存储过程(详细介绍与基本语法)

目录 一、存储过程——介绍 &#xff08;1&#xff09;基本介绍 &#xff08;2&#xff09;基本特点 二、存储过程——语法 &#xff08;1&#xff09;基本语法 创建 调用 &#xff08;2&#xff09;实操&#xff08;创建和调用&#xff09; 1、创建一个叫 "p1&qu…