15.3K Star,超好用的開源協作式數字白板:tldraw

来源:https://www.cnblogs.com/didispace/archive/2023/09/13/17699151.html
-Advertisement-
Play Games

大家好,我是TJ 今天給大家推薦一個開源協作式數字白板:tldraw。 tldraw的編輯器、用戶界面和其他底層庫都是開源的,你可以在它的開源倉庫中找到它們。它們也在NPM上分發,提供開發者使用。您可以使用tlDraw為您的產品創建一個臨時白板,或者將其作為構建自己應用的工具來使用。 線上體驗 tl ...


大家好,我是TJ

今天給大家推薦一個開源協作式數字白板:tldraw

tldraw

tldraw的編輯器、用戶界面和其他底層庫都是開源的,你可以在它的開源倉庫中找到它們。它們也在NPM上分發,提供開發者使用。您可以使用tlDraw為您的產品創建一個臨時白板,或者將其作為構建自己應用的工具來使用。

線上體驗

tldraw的官方網站就是一個線上體驗的demo,大家可以通過https://www.tldraw.com/直接訪問進入體驗。

tldraw線上體驗

可以看到界面非常的簡潔,速度也非常快。

開發整合

如果你要把tldraw引入自己的應用中,非常簡單,只需要通過類似下麵的方法使用即可:

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

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

您可以像上面這樣使用<Tlraw>的React組件構建一個預設的tldraw白板。你也可以基於此,擴展自己需要的形狀、工具和用戶介面等。tldraw還提供了編輯器API以支持開發者對白板元素的創建、更新和刪除。

具體詳細的開髮指南,可以前往官方提供的開發文檔學習使用:https://tldraw.dev/

tldraw開發文檔

最後,老規矩奉上相關地址,感興趣的小伙伴去深入瞭解一下吧:

歡迎關註我的公眾號:程式猿DD。第一時間瞭解前沿行業消息、分享深度技術乾貨、獲取優質學習資源


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我想起了我剛工作的時候,第一次接觸RPC協議,當時就很懵,我HTTP協議用得好好的,為什麼還要用RPC協議? 於是就到網上去搜。 不少解釋顯得非常官方,我相信大家在各種平臺上也都看到過,解釋了又好像沒解釋,都在用一個我們不認識的概念去解釋另外一個我們不認識的概念,懂的人不需要看,不懂的人看了還是不懂 ...
  • 什麼是隊列? 隊列是一種線性數據結構,隊列中的元素只能先進先出; 隊列的出口端叫做隊頭,入口端叫做隊尾。 隊列的基本操作 1.入隊: 只允許在隊尾的位置放入元素,新元素的下一個位置將會成為新的隊尾; public void enQueue(int element) throws Exception{ ...
  • 匿名函數和常見是內置函數(配合匿名使用)和for迴圈的原理,異常的捕獲 匿名函數 常見的內置函數(配合匿名函數使用) 可迭代對象 迭代器對象 for迴圈內部原理 異常捕獲 匿名函數 匿名函數不需要顯示地定義函數名,使用【lambda + 參數 +表達式】的方式 lambda [arg1 [,arg2 ...
  • 文章來源:https://www.zhihu.com/question/545653479/answer/3098666967 1 內部員工吐露 每天工作其實就是負責自己片區的紅綠燈,一大早就去校對時間,然後發佈到後臺。是的,統計出來的,而且還是人工統計,有誤差請見諒 真的是很辛苦了!不過還是希望他 ...
  • 通過這個解釋,我們將瞭解當Python程式顯示類似NameError: name '' is not defined的錯誤時,即使該函數存在於腳本中,也會出現這種情況。 我們還學習了當我們使用拼寫錯誤的變數或沒有導入的內置函數時會發生什麼,以及如何在Python中避免這些錯誤。 避免在Python聲 ...
  • 本文將使用實際的例子來解釋Python的urlparse() 函數來解析和提取URL中的功能變數名稱。我們還將討論如何提高我們解析 URL 的能力和使用它們的不同組件。 用urlparse() 從 URL 中提取功能變數名稱 urlparse() 方法是Python的urllib 模塊的一部分,當你需要將URL拆分 ...
  • Java實現常見查找演算法 查找是在大量的信息中尋找一個特定的信息元素,在電腦應用中,查找是常用的基本運算,例如編譯程式中符號表的查找。 線性查找 線性查找(Linear Search)是一種簡單的查找演算法,用於在數據集中逐一比較每個元素,直到找到目標元素或搜索完整個數據集。它適用於任何類型的數據集 ...
  • Matplotlib 提供了大量配置參數,這些參數可以但不限於讓我們從整體上調整通過 Matplotlib 繪製的圖形樣式,這裡面的參數還有很多是功能性的,和其他工具結合時需要用的配置。 通過plt.rcParams,可以查看所有的配置信息: import matplotlib.pyplot as ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...