当前位置: 首页 > news >正文

用 Excalidraw+cpolar 做会议协作,像素级还原实体白板体验

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

文章目录

    • 前言
    • 1.Excalidraw功能特点
    • 2.安装Node.js
    • 3.安装Git
    • 4.安装Excalidraw
    • 5.本地链接测试
    • 6. 公网远程访问本地Excalidraw
    • 7.内网穿透工具安装
    • 8.配置公网地址
    • 9.使用固定公网地址远程访问

前言

在扁平化设计盛行的今天,Excalidraw以算法模拟真实纸笔质感,重新定义了数字创作的温度——其核心引擎能将标准矢量线条转化为带有自然倾斜、抖动和粗细变化的手绘效果,支持从流程图到头脑风暴的全场景创作。特别适合远程团队需要快速可视化创意,或教育工作者制作亲和力教学素材的场景。

作为高校讲师,我曾为在线课程设计示意图时陷入两难:专业绘图软件太僵硬,手绘拍照又无法编辑。Excalidraw的出现让课件既有手写温度又保持可修改性,配合cpolar穿透后,学生甚至能实时在我的画布上标注疑问——这种"虚拟教室后排涂鸦"的互动感,让在线教学参与度提升35%。

但纯内网协作仍有局限:校外专家无法参与课程设计讨论,跨校区团队必须约定时间同步修改;重要教学素材分散在个人设备,备份恢复成为负担。尤其在疫情期间,实验室白板上的灵感无法及时转化为数字资产,常常造成创意流失。

cpolar的安全隧道方案打通了这些堵点:通过3000端口映射,将教研室的Excalidraw服务安全暴露至公网。现在外校合作导师能直接参与教案共创,毕业答辩时学生可远程修改图纸细节。最动人的是保留了协作过程中的"思考痕迹"——不像传统工具只能看到最终结果,这里能回溯每个线条的修改历程,让知识传递更完整。

本文主要介绍如何在Windows系统电脑端使用这款超好用的白板手绘工具Excalidraw,并结合cpolar内网穿透轻松实现使用客户端异地远程访问本地服务端使用白板手绘工具。

1.Excalidraw功能特点

Excalidraw 是一款轻量的手绘风格电子白板在线应用,无论是 Windows / macOS / linux,甚至是手机,打开浏览器就能使用,能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片,也可以作为会议画板使用,不仅是一款优秀的画图应用,也是一款自由便捷的电子白板应用。用户使用Excalidraw可以通过简单几下点击和拉伸创出所需的图形,而且图形可以通过一个链接就可以分享给你的好友一起协作展示或创作。

Github官方地址:GitHub - excalidraw/excalidraw: 用于绘制手绘图表的虚拟白板

Product showcase

上面这张图是官方在Github上说明文档中的一张截图,下面这种是我个人在使用中自己绘制的一张图。手绘的画风看起来很可爱。

image-20240919133642453

不管是官方的截图还是我自己画的图,看起来是不是都带有一种卡通、有趣的特点呢?试想一下如果在枯燥的技术思维中带有一种有趣的特点,是不是对技术图不显得那么枯燥乏味了呢?说了这么多该如何部署呢,往下看~

2.安装Node.js

下载地址:

https://nodejs.org/en/

image-20240919151845774

image-20240919142605931

3.安装Git

下载地址:

https://git-scm.com/downloads

image-20240919144149505

image-20240919144228038

image-20240919144401702

一直点击Next直到最后一步,安装完成。

4.安装Excalidraw

克隆存储库

点击win+R键,输入“cmd”跳出命令窗口

git clone https://github.com/excalidraw/excalidraw.git

image-20240919144704657

安装yarn

npm install -g yarn

image-20240919152526119

安装依赖项

yarn

image-20240919152548495

跳到excalidraw中

cd excalidraw

启动服务器

yarn start

image-20240919153754190

5.本地链接测试

现在,您就可以通过浏览器直接访问 http://localhost:3000 端口的Excalidraw服务,并开始在自己喜欢的代码编辑器中编码啦!

image-20240919153904426

可以看到,本地连接Excalidraw服务测试成功。

6. 公网远程访问本地Excalidraw

目前我们在本地成功部署了Excalidraw,但是如果我们想实现不在局域网下,在公网能够远程访问Excalidraw的话,我们就可以使用Cpolar内网穿透来实现公网随时随地访问了!免去了复杂得本地部署过程,只需要一个公网地址直接就可以访问。

7.内网穿透工具安装

下面是安装cpolar步骤:

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar。

img

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

接下来配置一下Excalidraw的公网地址~

8.配置公网地址

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个Excalidraw的公网http地址隧道

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:3000 (本地访问的地址)
  • 域名类型:免费选择随机域名
  • 地区:选择China VIP

image-20240919154546623

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http和https。

image-20240919154619026

使用上面的Cpolar生成的任意一个公网地址,在手机或任意设备的浏览器进行登录访问,即可成功看到Excalidraw界面。使用了Cpolar的公网域名,无需自己购买云服务器,即可到公网访问Excalidraw随便编辑绘图啦!

image-20240919154821299

小结

为了方便演示,我们在上边的操作过程中使用了cpolar生成的HTTP公网地址隧道,其公网地址是随机生成的。这种随机地址的优势在于建立速度快,可以立即使用。然而,它的缺点是网址是随机生成,这个地址在24小时内会发生随机变化,更适合于临时使用。如果有长期远程访问本地Excalidraw服务的需求,但又不想每天重新配置公网地址,还想地址好看又好记,那我推荐大家选择使用固定的二级子域名方式来远程访问。

9.使用固定公网地址远程访问

登录cpolar官网,点击左侧的预留,选择保留二级子域名,地区选择China VIP,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称,这里我填写的是Excalidraw,大家也可以自定义喜欢的名称。

image-20240919155403016

保留成功后复制保留成功的二级子域名的名称:Excalidraw,返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道Excalidraw,点击右侧的编辑:

image-20240919155447932

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名:Excalidraw
  • 地区:选择China VIP

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20240919155548403

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

image-20240919155625237

最后,我们使用固定的公网https地址在任何浏览器打开访问,可以看到访问Excalidraw成功了这样一个固定且永久不变的公网地址就设置好了。

image-20240919155912702

总结

Excalidraw是一款免费、有趣味性、丰富组件库的作图工具,如果你喜欢绘制一些趣味图,对于任何寻求简单、直观的绘图和图表工具的人来说,Excalidraw是一款出色的工具。它的易用性、灵活性、安全和协作功能使其成为各种用例的绝佳选择,也可以直接借助AI让其创作变得更加容易,最重要这是一款开源软件你可以将将其随时扩展到你的应用中去。

以上就是如何在Windows系统部署Excalidraw容器,并结合cpolar内网穿透工具实现公网远程访问内网本地服务的全部流程,感谢您的观看。

当怀旧美学遇上穿透技术,不仅是工具的革新,更是协作体验的回归。这种"数字画布+实体协作感"的模式,正在重新定义远程创意工作的可能性。

cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

http://www.dtcms.com/a/523553.html

相关文章:

  • 使用C++开发Android .so库的优势与实践指南
  • Spring AOP:注解配置与XML配置双实战
  • 基于YOLO11深度学习的半导体晶圆外观缺陷检测系统【Python源码+Pyqt5界面+数据集+安装使用教程+训练代码】【附下载链接】
  • 笔记本电脑待机、睡眠与休眠模式的技术差异解析
  • 2025丨时间很快,又来到1024
  • 基于python人脸识别系统 人脸检测 实时检测 深度学习 Dlib库 ResNet深度卷积神经网络 pyqt设计 大数据(源码)✅
  • 【C + +】unordered_set 和 unordered_map 的用法、区别、性能全解析
  • 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-31- 操作日历时间控件-上篇(详细教程)
  • 电子商城网站建设与维护怎么建设淘客自己的网站_
  • 基于 Vue3 + WebSocket 实现的平板控制端与大屏展示端联动方案
  • 提高自己的网站网站 利润
  • 外贸seo软文发布平台上海百度推广优化排名
  • Qt 图像与定时器实战:实现动态图片轮播效果
  • C++ 模板初阶:从函数重载到泛型编程的优雅过渡
  • 第 01 天:Linux 是什么?内核、发行版及其生态系统
  • Docker 安装 MongoDB 完整指南:从入门到实战
  • Docker 离线安装
  • CUDA和cuDNN安装
  • 一篇初识什么是容器,引出 Docker
  • HTML 理论笔记
  • 《Linux系统编程之入门基础》【权限管理】
  • ELK(Elasticsearch + Logstash + Kibana + Filebeat)采集方案
  • 网站建设金手指排名霸屏主机类型wordpress
  • uniapp微信小程序简单表格展示
  • 【html】每日打卡页面
  • Server 15 ,VMware ESXi 实战指南:Ubuntu 20.04.6 版本虚拟机静态 IP 配置、分辨率固定及远程访问实践
  • 吴恩达深度学习课程一:神经网络和深度学习 第三周:浅层神经网络(三)
  • Copilot使用体验
  • uniapp video 加载完成后全屏播放
  • 从MongoDB到国产数据库:一场2TB电子证照系统的“平滑着陆”实践