33.4K star!一款爆火的基於Web的可自托管白板繪圖計畫！

* 戳上方藍字「 開源先鋒 」關註我

推薦閱讀：

大家好，我是開源君！

在數位化時代，遠端協作和創意表達的需求日益增長。特別是在設計、教育和企業會議等領域，需要一個能夠支持多人即時協作的平台，以促進思維的視覺化和資訊的共享。

今天開源君要為大家介紹一個非常有趣的開源計畫 - tldraw 。

簡介

tldraw 是一個用於在Web上建立無限畫布體驗的計畫，它基於React庫開發，非常適合用來構建數位白板。透過tldraw，開發者可以輕松地在自己的套用中實作協作繪圖、設計和演示等功能。

這個計畫的核心是一個名為Tldraw的元件，它能夠嵌入到任何React套用中，提供全螢幕的畫布渲染。tldraw 的設計哲學是簡潔和靈活，讓開發者能夠快速上手並創造出豐富的套用。

目前計畫在Github上面收獲了33.4K star！

效能特色

快速安裝使用

要快速開始使用 tldraw，可以按照以下步驟操作：

1、透過 npm 安裝 tldraw 包

npm install tldraw


2、建立或編輯 index.css 檔，並添加以下內容：

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("tldraw/tldraw.css");
body {
font-family: "Inter";
}

3、渲染 Tldraw 元件：在 React 套用中匯入並渲染 <Tldraw /> 元件：

import { Tldraw } from 'tldraw'
import './index.css'
export default functionApp() {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
 )
}

當然，官方提供了非常多的元件樣式供參考。

如果要進行本地開發的話，可以依次嘗試下面的命令：

git clone https://github.com/tldraw/tldraw.git 
yarn
yarn dev


然後瀏覽器開啟 localhost:5420 即可體驗。

計畫體驗展示

官方提供了一個線上體驗的demo站：

https://www.tldraw.com


界面很簡潔，速度也挺快的。

上面選單欄是當前計畫檔的一些設定選擇

中間下面的工具列，可以選擇不同的元素，如畫筆，箭頭，文字，圖片，各種圖形等。

右邊的內容欄裏，可以調整元素的顏色，大小，線條，層疊位置等內容。

我們在進行創作的時候，可以隨時對計畫進行保存，生成原生的.tldr檔。

一旦需要還原之前的內容時候，可以直接將保存的.tldr檔匯入或者直接滑鼠拖入進來即可。

如果要將你的畫板分享給別人，可以直接共享 URL 給別人。

小結

tldraw 是一個功能強大且靈活的開源計畫，為Web套用開發者提供了一個功能強大且易於整合的畫布解決方案，還透過其豐富的API和自訂選項，使得開發者能夠根據自己的需求客製功能和界面。無論是用於教育、設計還是商業演示，tldraw都能夠提供出色的使用者體驗和協作能力。

更多細節功能，感興趣的可以到計畫地址檢視：

計畫地址：
https://github.com/tldraw/tldraw