嘉立创EDA如何EMC仿真

花了几天时间玩了一下 arduino 和佳丽创，这两个都是之前没有接触过的，这个玩起来也很简单，只要跟着步骤来就可以了，要自己去尝试做就可以了， 也不怕被别人嘲笑，毕竟是第一次做。最后可以看一下三 d 预览图。一大早快递员就过来了，到了新的快递还是加急的，要赶紧修了。

哈喽，大家好，我是安 a， 给大家介绍一下美化 pcb 加立创 e d a 扩展，能够将拐角美化为圆弧凸变得线宽去贝萨曲线的平滑过渡， 这个有快脚跟撤销支持，到时候大家直接在这里面搜美化 pcb， 应该就能搜到接下来这个插件，之后建议大家把顶部插墙显示给勾上，这样的话大家就能在置顶插墙这里打开了，直接就能用了。随便打开一个板子给大家看一下， 我们看一下基础的操作点，一根线点这里美化 pcb 圆滑布线只处理你选中的啊，然后支持二次修改，不满意呢，你直接拖着这个点往另一个方向拉就消失了。撤销， 然后支持圆滑所有的布线，它就会开始处理你的圆滑布线，然后这里有些小环插，这个插件还没有 dcr 检查的功能，不过这个还好了，你就直接一拖，嗯，解决啦， 也一样啊， ok， 这样小黄他就没了嘛。其实也可以通过你去修改这里的最大圆角半径去限制他，你可以把这个改小一点，就这个变化的范围不会特别大。接下来我们拍另一个功能，宽过度嘛，嗯，选中 一点， ok， 这里呢，你可以设置他他这个过渡段的最大段数啊，直接放在上面用鼠标滚轮滚就好了，这里更大的太多，你一点可能会卡一下。然后你可以设置一下他这个过渡比例，这个可以大点，没所谓的。如果填的比较小是什么效果，比如说我这里就是一倍线宽之差吗？过渡已经非常， 你选啊，然后点这个 no， 看，这就非常短，它这里就生成三四段的样子吧，最长不会超过你这个窄端的长度的，所以无所谓，你选长一点就好了。 不想一个一个点啊，那情况全部现房。至于这里为什么没有，你看它这里其实不是同款的，其实我们可以撤销掉了，这些就是快照了，我们直接试一下这个撤销效果， 就像是就回到最初的状态了。我再简单设一下其他的吧，这里有一个开关，就是连画布线之后线宽也给过度了，就说相当于你不用点两次，这个看你自己写好了，默认是打开的。然后还有这个合并短线段， 比如说这里这个第一副，大家看如果没打开的话，效果是怎么样的呢？他是有很多段的，他会把中间一根短的线段合并掉， 就看你的需求，如果每个怀典的卫衣不能特别大，那不建议你打开，它跟之前的变化是挺大的。看我这里的话就无所谓了，我打开就可以了，是吧？因为我这里就这两个汉盘，强制深层圆弧的话先不管开启就好。然后我这个的地址呢？在这你点击这里 get 就 可以跳转过去了，你可以把我的代码下载下来。呃，有问题先这个一十五提一下，好像也就这么多了，欢迎大家提交反馈。好，那么就先到这里，拜拜。

大家好，欢迎来到加一创 eda 本讲内容，我将为大家讲解加一创 eda 扩展插件的下载及安装。 本讲内容一共分为四个部分，首先是扩展插件的介绍，其次是下载扩展插件，然后是安装扩展插件。最后对本讲内容进行一个总结，首先是扩展插件的介绍， 那么什么是加一创 e d a。 扩展插件呢？加一创 e d a 扩展插件是由加一创 e d a 官方或用户按照加一创 e d a。 专业版扩展 api 开发的加一创 e d a。 专业版编辑器功能扩展模块。 在加一创 eda 专业版用户指南文档站 products 点、绿创 eda 点实验中，我们提供了扩展 api 文档，也欢迎大家与我们共建 eda 插件生态。那么如果你也想成为加一创 eda 扩展插件的开发者，也欢迎访问我们的用户指南文档站， 你在用户指南文档中点击扩展 api 入口，在这里有我们所有的加一创 eda 扩展 api 的 介绍以及使用说明，还有如何自己开发一个加一创 eda 扩展插件。好，我们回到本讲的内容， 扩展插件有什么用呢？使用扩展插件可以丰富你的加一创 eda 软件功能。 以线圈生成器为例，以往在绘制 n f c 线圈或无线充加热台的线圈相对比较麻烦，而且不规整，那么我们就可以通过安装线圈生成器扩展插件，实现快速生成规整的线圈来大大节省我们的时间。 我们如右图所示的这个图片，就是用线圈生成器扩展插件生成的线圈，可以看到是非常规整的一个线圈了， 然后中间的呢是我们这个插件的一个设置界面，可以设置圈数，内半径等等，以及包括电感值的估算。那么我们如何去下载这样的扩展插件呢？ 啊？下载扩展插件的话，可以到我们的加一创 e d a 扩展广场中下载加一创 e d a 扩展广场的域名如下， 我们点击加一创一的扩展广场的域名就可以访问了啊。如果你想从呃其他地方访问的话，还有一种办法是通过我们开云平台来访问，我们点开开云平台， 在这里横幅有一个加一创一的扩展广场，点击这个横幅也可以访问到我们的加一创一的扩展广场中，那我们刚刚看到的现生成器就在这里了。 点进来可以看到线圈生成器的详情介绍，在左侧这一部分是现在生成器的功能描述，它可以生成螺旋线圈啊，方形线圈 以及可以配置的参数，还有用户界面访问的呃一个地方，那么在右侧的话有我们这个扩展的类型，他是一个 pcb 的 扩展工具， 然后以及关键词 f c 或 p c b， 然后还有扩展信息 版本号，发布者时间名称 u i d， 即适用的 e d a 版本，这里我们主要关注适用的 e d a 版本，在安装这个扩展之前，你确保你的 e d a 版本一定是大于这个二点二点三二的 好，然后是相关链接，相关链接的话一般是放的是这个扩展的源码以及反馈的地址， 我们点到旁边可以看到他的更改日期，他所有的发版记录，哪个版本变动什么，可以在这里看到更改日期，然后旁边是历史版本，可以下到历史版本， 然后评论。如果你有一些呃建议或者反馈对这个插件的建议或反馈，你可以在评论区留言以及评分。好，那么我们下载这个线圈生成器。 好，那么我们如何去安装扩展插件呢？好，我们打开我们的专业版编辑器， 在设置啊顶部菜单栏设置的列表，找到扩展扩展管理器，在这里就可以导入刚刚下载的点一一叉 t 后缀的扩展文件了， 导入进来是默认起用的，如果有的扩展它还有外部访问的请求，你还需要打开这个外部交互功能这个功能呢，按需打开默认是关闭的。 那么我们这个插件呢，是一个呃离线的生成器插件啊，所以它不需要用到外部交互功能。然后 现在呢，你的这个扩展就已经导入进来了，但是你在顶部还看不到他的菜单啊，因为我们返回到刚刚下载的地方，点到详情往下滑，看到这里的介绍 啊，这是一个 pcb 的 一个生成器工具啊，所以他的菜单栏访问呢，是在 pcb 页面，所以也就是说呢， 如果说你导入进来看到顶部菜单栏没有这个插件的一个入口啊，并不是说明他没导入进来啊，他只是啊是在一个特定界面下，比如说这是个 pcb 的 插件，那他肯定是在 pcb 的 编辑界面，他才会有这样一个菜单。 我们点到线圈生成器菜单下线圈生成器啊，设置圈数内半径轨道，我们用默认值来绘制一个螺旋线圈， 可以看到这个线圈的生成速度是很快的，并且也给定了对应的一个计算的电感值，我们再生成一个方形线圈， 也是很规整的一个线圈。好，那么我们回到 ppt 中，我们现在呢，这个扩展插件就已经导进来了，已经可以用了啊，如果你不需要使用的话，你就点扩展管理器这里，把它启动关掉就好了。 我们回到 ppt 中，最后呢，我们对这一讲内容进行一个简单的总结。 在本讲内容中呢，我们讲解了什么是加一创 e d a 插件，如何下载加一创 e d a 插件， 如何安装加一创 e d a 插件，并介绍了加一创 e d a。 扩展广场。现在呢，你也可以在 e d a。 扩展广场中获得更多好玩、有趣、实用的功能扩展，来丰富你的加一创 e d a 功能。 本讲内容呢，我们将讲解专创一对扩展插件发布及管理好。那么本讲内容呢，一共有三个部分，首先是扩展插件发布及规范，其次是扩展广场插件管理。最后我们对本讲内容进行一个总结， 我们看到第一个部分是扩展插件的发布及规范啊，那么对于打算上架到加一创 e d a。 扩展广场的插件，我们会有相对的规范要求，你需要遵守我们的扩展插件规范，才能成功上传至 扩展广场，以便更多人使用你的插件。那么扩展广场的上传规范啊，就有如下八条。首先第一呢，你的扩展应该包含以下的属性 名称、唯一标识符显示名称、描述版本及许可证信息。 那么对应到我们啊，开发工具这里找到啊， extension 点筛选文件在这里啊，你要包含，第一个是名称 name 啊，你的名称要有，第二个是 u u id， 也就是唯一标识符，然后是显示名称， 然后呢就是描述啊，对于这个扩展的描述，其子是版本，版本号要对应，如果你的扩展有升级或变更，对应的版本号呢，也要进行更改，并且更改完成之后呢，你还需要在这个 change log 填写你的变更日期。好，然后就是许可证信息，许可证信息这里我们是阿帕奇二点零许可，这个按你的需求去填写， 然后我们的第二条至少选择并填写一种或多种符合要求的扩展类型。 我们找到对应的这里啊，我们这个工具呢，是一个 pcb 工具，所以我们这里扩展类型填写的是 pcb 啊，那么对应到 这里有一个开发指南，我们 api 文档网站呢，也有告诉你这些 填写的内容。找到扩展配置文件在这里啊，找到扩展分类可选项啊，原理图，符号， pcb 啊，引角，面板库或者项目或者其他， 这是你的可选值，你只能填写这里面的，只选其中一个。好，然后呢，我们 扩展需要提供自定义的图标啊，不得使用 sdk 提供的默认 logo 推荐比例尺寸呢，为一比一啊，分辨率最好是二五六乘二五六，格式需要是 png 或 jpe， 内容需要清晰，无侵权风险，文件大小不得超过五 mb。 好， 那我们对应到 我们的开发源码里面呢，是在啊 images logo 这里，这个图片啊，改成你自己的图片，不要用官方的 sdk 里面包含的图片， 否则也是在上传时候会被拦截下来啊。那么第四条是确保你的扩展入口文件存在且有效。那扩展入口文件呢？ 啊，在我们的 s r c 资源文件夹下， indexin， tpos， ts 文件里面， 在 ps 文件里面，你要确认你的啊，这几个功能入口是有效的且存在的， 你如果这个是无效或不存在的话，那你可能这些功能入口要么点不进去，要么就是，呃，基本上就是用不了，你的功能基本上是报废的。好，然后我们第五条， 不同的扩展具有不同的 name 属性，值不得重复。 可以看到啊，也是刚刚的 extension， 点 g s g s 文件里面 u u i d 值啊， u u i d 值不得重复，你的扩展名称不得重复。 好，然后我们看在第六条里面，在 readme 点 md 文件中，要详细说明扩展的功能及使用方法。 我们找到 redmi 文件，这里的 redmi 呢，我放了有两条， redmi， 一个是英文的，一个是中文的，按你需求，如果你不需要英文呢，你就只要保留一个 redmi 点 md 文件就够了。好，你要确保你的 啊，你的扩展的功能，要明确你的扩展有什么功能啊，可以做什么？然后扩展描述其实是使用方法，你要告诉用户你的扩展如何去使用， 比如说你的扩展，你只注册了 pcb 界面，你要告诉他你的这个入口是在 pcb 啊编辑界面下啊，才会有这个入口， 不然人家用户拿到你的扩展之后，跑到原理图界面一看，没有这个状态栏，没有显示这个入口，还以为是扩展出现了问题，所以要明确好你的使用方法。那么在第七条，在 change log 点 md 文件中记录扩展的更新日期， 你打开拆极 log 里面，在这里记录好你的所有的版本变更日期，一定要明确你的版本变更日期，确保啊你在这个版本中变更了什么，或者说做哪些更新，或者说是修复了什么。 那么第八条，那么扩展中禁止包含个人隐私信息，例如邮件地址及电话号码， 这条呢，是为你的安全考虑，所以你在 extension 点 this 文件中不要去包含你的邮箱啊，像这里，我们这个是以官方发布的，我们放的是官方的邮箱，所以你的邮箱最好是不要放在这里面，然后你的作者名称最好也不要填你 自己的真名啊。然后你的 realme 文件也不要放一些啊，什么邮箱地址或电话号码， 那么遵循这八条，然后我们接着看，我们还有三条，这三条呢，虽然说不会拦截，但是在审核过程中呢，我们也会去看一下。 首先你的扩展配置文件中， home page 及 box 换成自己的存储库地址及问题反馈地址。我们看到 extension 啊，要换成自己的主页 啊， box 呢？换成自己的问题反馈的地址，这个主页呢，可以是呃开源平台的啊，或者说是代码仓库的 啊。 box 反馈地址呢，填你自己的一些反馈地址啊，不要填邮箱啊，填你自己的反馈地址。你像那种仓库里面一般会有呃问题反馈的一个地址，提问区在那里，把那个链接放上来。然后第三条 啊，第二条啊，在上传发布扩展插件之前，建议先使用一些导入，测试下你的扩展功能是否完善，界面显示是否完整，确保功能及界面无误后再上传发布扩展插件。 像我们在啊审核的过程中呢，我们审核时候，有的时候有的有的用户他的插件呢， 可能显示界面不全，或者说是没有加载完善，或者说是啊功能用不了等等。这种话建议先导入到你的 eda 去测试一下，确保完善功能完整之后再上传。然后 第三条，插件内严禁存在违法违规和恶意插件行为或内容。 我们提供的 api 虽然说是很多的，但是你不要拿这些 api 去做一些违法违规或者说呃恶意插件的行为或内容，像这样的内容呢，我们是百分百是不允许通过的。那么在使用插件时候，同样也注意 有外部网络访问请求的啊，没有在扩展广场发布的插件，这类插件一定要注意它的安全，避免出现自己的数据损失的问题。 那么接下来我们将介绍如何上传扩展插件至加一创 e d a。 扩展广场 在上传，在创一贴扩展广场之后啊，我们这里有个扩展管理，在扩展管理中呢，点扩展上传，你就可以上传你的扩展了。 呃，比如说我是，呃这个文档 dos 杠 twos v 一 点零点零点一叉 t， 我 点击上传 啊，点击上传他会提示你的上传信息啊，我们这里呢，因为是用的是官方账户，他是有官方的邮箱反馈邮箱了，所以这里啊，我们直接不用管他。然后另外这个扩展其实是已经上传了，已经在这里了，所以我们重复上传也是会被拦截下来的， 所以我们接着看后面扩展广场的插件管理，在创 e d a 扩展广场插件管理，我们同样看到页面来， 也是在你发布的扩展，会在这里扩展管理这里会显示出来，比如说我们刚刚呃上传上架了这一个扩展， 在这里呢有详情页。详情页呢，可以看到啊，也就是用户访问你的扩展时候，他看到的页面，这个就是详情页，就是你的这个扩展的呃，主页， 那在这里呢，你就可以看到你的一些扩展信息了。详情页呢，对应的就是在你扩展文件里面的 readme 部分，看到 readme 部分这里就是对应进来的， 你可以去看一下你的 redmi 进来之后它的显示是不是全的，或者说有没有缺损缺，呃，或者说解析不正确。这个你可以看一下，然后在右侧啊，类型 就是你刚刚在 extension 点 js 里面填写的类型，关键词也是在里面填写了扩展信息，同样也是里面的。然后你的试用 eda 版本，确保你的试用 eda 版本是测试过的能用的 eda 版本。 然后如果你的这个扩展插件是在二点零的 e d a 版本上开发的，那么可能在 e d a 变更到三点零版本上可能会有一些 api 的 变更升级， 这种你要注意下 api 的 啊，适配情况好。然后更改日期呢，就是我们刚刚在资源文件里面， 还有在我们源码里面的 change log 文件，这就是我们的变更日期。 历史版本呢，不用去管它，历史版本是你每一次变更之后提交之后会自动保留，当然如果你认为你的历史版本存在严重性的问题，你可以进行下架处理 好。评论区呢是可以看到呃使用你的扩展的用户对你的扩展插件进行了评论。 好，我们点到扩展管理继续这里。第二个功能键是更新功能，如果你的扩展有版本性的变更，比如说我升级到了 v 一 点零点一的版本， 不需要再去点扩展上传了，直接点更新就可以了，然后选中你的 v 零一点零点一的版本 就可以了。那么更新后呢，他会默认在版本管理这里给你新增一栏，也就你的历史版本呢。如果你认为你的历史版本有严重性的问题，你可以点击未发布，把它下架掉或点删除删除掉。 如果你认为你的整一个扩展都存在问题的话，就点击下架就好了。或者说如果你不想在啊扩展广场上传你的插件，那么就点击删除键删除就可以了。 最后在右上角这里还有一个分享图标，你可以把这个地址复制下来分享给你的小伙伴。 好，最后我们对本讲内容进行一个简单的总结。那么在本讲内容中呢，我们讲解了将一创 eda 扩展广场的上传规范、插件上传演示及插件工管理功能的展示。 我们也欢迎大家广大的开发者与我们共建加一创 e d a 的 扩展插件生态，打造好用易用的加一创 e d a 软件。本讲内容我们将进入到扩展插件的开发实战。在本讲内容中，我们将开发一个 dos tools 文档工具。 本讲内容一共分为四个部分，首先是要明确我们的开发思路及方向，其次是要对开发环境的配置，然后进入到开发实战，最后我们对本讲内容进行总结。 首先我们要明确我们的开发方向及思路，那么我们为什么要开发一个 dos 文档工具呢？ 在使用 eta 编辑器中，你是否有遇到过无法在 pcb 中注时公式以及文字排版相对麻烦，那么接下来我们将通过加一双 eta 专业版 a p i 来解决这个问题，为你的 eta 功能添砖加瓦。 那么如何通过简单的方式让文档排版更好看呢？相信大家在编写开源描述时通常会采用 markdown 来编写， markdown 相较于复文本会更美观更好看，所以这里我们同样打算采用 markdown 来编写文档。 那么如何通过简单的方式来显示复杂的公式呢？那就是 latex。 latex 表达式可以通过简单的符号表达出复杂的公式，所以这里我们打算采用 latex 来编辑公式， 但是普通的文本不支持 markdown 和 natx 的 显示，我们怎么样去让它显示呢？大家还记得在 pcb 中是怎么导入自己想要的图案或 logo 吗？ 啊，那就是导入图片，我们可以通过导入图片的形式来显示复杂图形，所以这里我们主要原理就是通过导入图片的形式到 pcb 的 文档层中。 那么明确了大致的开发思路，我们就可以开始查找相关的 e d a 编辑器 api 了。那么我们首先要找到的就是和 p c b 图像图源相关的 api， 那 么就是 p c b primetime image 类。 我们查找 api 啊，可以打开到我们的加一创 e d a 专业版用户指南文档，站在这里有一个扩展 api 栏，我们点进来， 在这里就是所有的扩展 api 的 介绍，我们找到我们需要用到的和 pcb 相关的类，在这里找到我们刚刚说的导入图片相关的，那就是 prom team image， 在 这个类中我们可以看到这个类里面的啊，很多个方法， 那么我们要创建图像就是这个第一行 creative 方法，在这个方法中呢，我们可以看到这个方法的签名以及参数名，还有返回值和备注。 好，我们回到 ppt 中，这就我们刚刚找的啊 creative 方法，我们先看到它的参数， 以后他要传入的参数，他必须要传入四个参数，然后这这些是可选项。我们首先要传入的参数是 bbox 的 左上点坐标 x 轴以及 bbox 的 左上点坐标 y 轴，还有图像图源数据以及层， 那么这里我们看了一眼啊，比较难获取到的是什么呢？图像图源数据，那么这个图像图源数据怎么获取呢？哎，这后面也告诉我们了，可以使用这个方法将图像文件转换为复杂多边形数据， 那么这个图像文件啊，怎么转换为复杂多边形呢？啊，我们继续，那在这个方法中有一个参数是复杂多边形啊，描述中告诉了我们转换方法，所以我们还需要去调用这个 a p i 来获取这个啊，复杂多边形 啊，这个方法是在多边形数学内，我们找到这一个啊，转换方法， 我们看下这个转换方法的参数啊，他要传入什么参数？首先第一行啊，他要传入图像的 blob 文件， 哎，这个 blob 文件可以使用哎，这一个 api 去这个 api 的 方法，从文件系统中读取文件，然后第二个参数是图像的宽度，第三参数是图像的高度，然后剩下的是可选项啊，可选项我们先不去管它， 此时我们还应该有一个窗口去实现表达式的编辑及预览， 那就通过 e frame 啊，内连框架窗口，那我们为什么要去有这个窗口呢？大家在编辑看文档的时候， 是不是在左边会给你一个编辑栏，在右边给你一个预览窗，所以我们还要去创建一个编辑和预览的实现。 那么这个方法啊，就是打开内联框架窗口啊，这个方法 open e frame， 我 们可以看下这个方法需要传入的参数啊，我们必须要传入的只有第一行参数需要加载的 html 文件在扩展包内的路径。 好，现在我们已经了解了我们将要使用的 eda 编辑器 api， 那 么接下来我们还要去了解如何去实现将 markdown 和 latex 变成 eda 编辑器 api 能够理解的啊，数据格式，也就说它能够传入的啊，这个参数， 嗯，也就是这行 blob 文件啊，我们如何去让它获取到这个 blob 格式 啊？首先我们先来看 latex 的 公式显示如何实现呢？这里我们有这几个工具， 那么这上面三个就是我们可以获取到，也就说它可以帮我们转换的啊，把这个，呃 文字表达啊，表达是转换成图像的啊这三个工具，然后下面这个就是我们要把这一个图像转换为 blob 文件的工具。 我们这里我们列了一个流程图， must 点 js 是 一个开源且本地 latex 支持 svg 生成的组键，所以在本项目中我们将使用 must js 来实现，而 bugdown 的 实现啊，也是类似，它只是将 dom 去转为 blob， 那 么它的转换工具也是一样的，也是这个 canvas。 我 们可以看一下这个流程图啊，这上面我们刚刚列的三个工具啊，其中表达是可以通过本地处理，走 mass index 和 kitex 转换为 svg， 再通过 canvas 转换为 blob。 那么还有一个方法呢，都是通过表达式，然后通过云端的 api 处理，然后走这一个转换为 svg， 然后再转换为 canvas， canvas 再转换为 blob。 那 我们肯定优先是本地处理的， 所以我们这里选的就是 master jax。 最后我们给一个汇总的啊开发流程图，我们只需要一点一点通关啊，一点一点把它打通， 这一个整个功能就能实现了。我们首先先看啊，我们要通过啊啊 excel 打开一个 excel 窗口，然后在这个 excel 窗口中啊，是通过 html 去编辑了，然后用户在这个 html 里面去啊编辑好表达式， 那这个表达式呢？通过本地处理，然后再转换为 svg， 然后再通过 canvas 把 svg 转换为 blob， 然后得到这个 blob， 就是 我们需要啊，也就 api 能理解的一个数据格式，我们把这个 blob 再传入到这个复杂多边形的转换的方法里面， 然后这个复杂多边形转换方法给我给了，我们返回的就是复杂多边形数据，再把这个复杂多边形数据传入到这个 create 创建图像的啊这个方法里面，这样我们的啊图像图源就得到了。 好，那么我们接下来就进入到开发环境的配置，那么在开发之前，确保你已经安装了，记得点 gs 环境和 vs code 的 这一些辅助插件，如果还没有安装，可以先看一下 api 环境配置章节 啊，以及在我们的文档中，这里有一个啊，如何开始在这里点到右边侧边来啊，获取 vs code 的 扩展，以及拿取 sdk 仓库到本地，这里都告诉我们了。好，那我们接下来呢，先把这个 sdk 拿取到本地， 我们打开 vs code， 我 这里新建一个终端。好，我先创一个文件夹。 哎，我这里有一个 workspace， 我 就不创文件夹了，那我们就直接去拿取这个 s e k 了， 这里呢给了两个环境，一个是 get 环境，一个是 gethub 环境，按你所在的网络环境去选择啊，如果你是中国大陆以内的，我们推荐你通过 get 去拿取。 好，我们这里呢就把这个 sdk 已经拉下来了，我们把 vs code 先进入到这个 sdk 的 文件夹中。 好，我们可以看到这里面有所有的文件 sdk 的 文件了，那么我们看到这个框架，我们首先在开发之前，我们先要去编辑 send 点 j s， 那在这个里面呢，我们需要定义的是我们的啊，我们的这个插件的名称，那么插件名称呢？我这里啊， dog 键 dog 杠 tools 啊， dog 杠 tools 插件，而 uid 可以 先不管， uid 是 后面会自动生成的，所以这里我们不用去管它，然后显示名称啊，往这里写 dog 杠 tools 文档工具， 这个显示名称呢，就是会显示在啊扩展广场上面的一个名称，然后这个 name 名称呢，就是我们这个插件啊，下载下来它的后缀之前的那个名称 好，然后这里呢是描述，我们这里的描述就是啊专业版编辑器文档工具 版本号一点零点零啊，不用去管了，因为我们是初识版本。然后这里是作者，这里的作者呢填写大家啊自己的昵称， 填大家自己的昵称，然后这个邮箱呢？呃，大家不要在这里面填写邮箱啊，我们这里是官方的插件，所以我们这里填写的是官方的支持邮箱，大家不要把自己的邮箱填进来啊，避免一些隐私泄露。 然后这里呢是支持的 e d a 版本，这里是大于二点三点零的啊，大家可以根据自己的插件情况去测试，然后再去修改 好，然后我们呃看到看到这里 home 配置，这里 home 配置呢是呃一个主页，这个主页呢一般是填写大家啊开源仓库的一个地址，然后 box 呢是填写大家开源仓库的一个问题反馈地址，那这里我们是官方插件啊，我们这里就不去修改了。 然后这里呢啊尹妹姐 logo， 这里是 logo 的 路径啊，这里 logo 路径呢？大家啊，如果要上传到开元广场的话， 扩展广场的话，必须要把这个 logo 啊给它换掉，不要用我们默认的这个 logo。 然后是关键词，关键词我们这里改成文档啊， 我们这些的配置啊，也可以在啊我们的文档网站这里有一个啊扩展配置文件，我们可以看一下啊，这里关键词， 关键词你可以填写啊，你认为相关的一些关键词，然后是扩展分类， 扩展费呢，就是我们刚刚上面的这里啊，这里是阿德，那我们这个扩展呢是一个 pcb 相关的扩展，因为它是 pcb 文档层创建文档的一个扩展，所以我们这里改成 pcb。 好， 然后源码仓库的啊，地址啊，这里可以改成自己源码仓库的地址。 好，其他的就不去改动了，其他的我这里就保持默认了。好，然后我们主要要看到了我们需要改动的是哪里呢？就是这里， 这里呢就是我们的插件啊，在顶部菜单栏的一个入口的地方，一个入口的一个标签的地方， 比如说啊，我们这里是一个 pcb 插件，我们只让它在 pcb 的 菜单栏显示菜单，那我们就只保留 pcb。 然后呢啊，我们这里把，我们这里把这里的 id 啊给它换掉， 抬头呢就是它显示的这个菜单的啊，一个名称，我这里和 id 保持同步。 然后呢这里呢就是子菜单了，也就是你这个菜单下的下拉列表里面的一些可选项啊，那么 about 的 话就给它留着吧， about 是 它默认生成了。 好，我们首先我们要做两件事啊，我们一个，一个是 latex 的 这个公式的工具，我们创建一个 latex 的 入口， 一个 latex 的 选项菜单， 然后这一个注册的这个 fn。 这里呢就是我们等一下入口啊，入口方法的一个名称，要跟入口方法的名称对应上去， 要对应上去，不然的话啊，他找不到这个入口，你这个你这个选项可能就是无效了。 好，然后我们还有一个是什么 markdown 的 工具， 我们这里呢就是 pcb 杠 markdown。 好， 我们现在来看一下啊，这个入口方法的名称啊，这个入口方法呢？这个入口是在 s r c 里面的 index 点 ts 里面，在 index 点 ts 里面，这里给我给了我们一个创建好的 about 的 这样的一个方法入口，那么这里呢，我们就把它保留一下，我们还要创建一个 markdown 和 latex 的 入口， 好，这里跟我们刚刚写的对应上啊， pcb latex 复制过来， 然后 pcb markdown 好 复制过来，然后这里面呢我们刚刚的流程图啊，我们刚刚的流程图 看一下，我们是要先打开一个类链框架，所以 所以这里面的跟 about 相关的这个消息窗口我们就不需要了，因为我们要打开列表框架， 那么在啊打开列表框架之前啊，打开列表框架之前，我们看一下列表框架的这个方法，看一下列表框架方法，直接在这里面看， 哎，这里有一个内点框架支持啊，这里面告诉我们这个内点框架支持要怎么样去操作。我们看到这一个啊，内点框架的打开方法里面， 一个是签名，然后一个是它的这个参数名，我要传入参数这里告诉我们需要加载的 html 文件在扩展包内的路径， 那么这个 html 文件呢，在这个 e frame 类链框架这里，下面 index 点 html， 我 们这里把名称改掉，改成 latex 和 markdown 啊，一个 latex 点 html， 然后一个是 markdown， 好， 这样子，我们的啊一个窗口页面啊就有了，然后我们要在 index 点 t s 里面把这个窗口给打开， 那么我们 e d a 啊，点 e d a， 哎，我们先把这个，把这个 s d k 先啊它的 n p m 包先安装一下，刚刚还没有安装 n p m 包，没有安装 n p m 的 包，它这里就标红了啊，找不到名称了，先安装下 n p m 包， n p m install。 好， 这里我们的 n p m 包就已经安装好了，我们可以去 n p m build 去验证一下 啊。 n p m run build 去验证一下我们这一个插件啊，是不是可以编辑成功？ 你看到这里已经生成了一个文件了。 好，已经编辑成功了，那么它编辑完成的插件在 build 文件夹下啊， delete， 这里有一个 pro 杠 api 杠 sdk 啊，为一点一点零一点零点零点一叉 t， 哎，我们这里是不是没有保存啊，所以它应该是没有保存，我们点一下保存 覆盖掉，因为我们这里也是 dos 框 tools， 但这里生成了 pro 杠 api 杠 sdk。 好， 我们再编辑一下 啊，好了，这里我们的 dos 框 tools 的 插件就已经编辑成功了， 那么我们继续去完善它的功能。刚刚在啊 index 点 t s 入口这里啊， e d a 的 这一个也安装进来了 啊，这是一个 s i s 系统类系统帧内连框架类，在这里面我们要调用一个打开的方法。 好，我们要指定我们的路径， 路径是在 frame 啊，我们这里是 latex， 那 就是 l a t e x 点 html， 然后给他指定一个宽高，这个宽高我这里就啊只先指定个。呃，五百，五百吧，等一下我们去看一下，如果说超出了，再调整 好，把这里复制下来，粘贴上去，名称改成 markdown 啊，对应一下，我们这里名称是一样的。好，这时候我们的入口就已经写好了，然后我们要完成的就是什么呢？看一下我们的啊 ppt， 我 们的流程图， 我们要完成了，就是到这个 html 这里了，我们前面已经编辑好这个方法了， 那么回到编辑中，打开 html， 这里给了我们一个视力的页面， 那这个就先不要了，然后开头呢就是这个窗口的一个名称改成 l a t e x， 好在 body 里面我们去写这个一个 html， 我 们首先啊要有一个输入框，先用 diy 给它包裹一下，方便我们后面去 改这个样式，我们的想法呢是让它上下结构 natx， 因为它啊这个 编辑的文本要比较少，所以我们把它放到上面，在上面编辑一个文本，然后在下面给一个预览，然后在呃编辑文本的输入框右侧放一个按钮，我们这里先用 diy 给它包裹起来，然后创一个输入框， 这个输入框我们给一个提示，在此输入 l a t e x 表达式。 好类型，是一个文本类型， 智创呢，我们输入框就好了，然后我们再创一个按钮，这个按钮呢是一个生成按钮，我们先给他预留一个啊，一个按下的指向。 好，然后呢就是预览了，我们上面有了这个呃输入窗口和生成按钮，接下来就是预览，同样也用呃 diy 先包裹起来， 然后在啊预览的下面是，我们等一下要通过 t s 啊 j j s 来完成了， 那这个地方就给它预留一下，然后我们指定一个 id。 好，然后在呃，然后我们在这个输入框这里啊也指定一个 id， 方便我们后面， 方便我们后面在 g s 里面去获取。哎这个输入框里面的文本， 然后我们给这个盒子就已经完成了，我们这一整个盒子就已经完成了，我们可以去安装一个插件，安装一个 html 的 一个预览插件，可以看一下， 不然光看代码还还预览比较麻烦。这个插件啊，我个人用的是这个插件啊， ctrl 加 key， 然后再按下 v 看一下预览。 好，我们大致的想法就完成了，我们上面是一个输入框，然后旁边一个按钮，下面这个区域呢就放预览， 这个时候呢，这个纯 html 还是比较丑的，所以我们还要加一点点样式，加一点点 css， 我 们在这里加一点点 css style 风格。那么首先啊，先是输入框，给它指定一个啊， class input 输入区， 我们先把底色也给它换一下吧，先把包底也改一下， 这里的字体我我比较喜欢这个 颜色呢，指定一个， 嗯，深色一点点，深灰灰色一点， 我再指定一下编剧。 好，然后就是我们刚刚创的这个啊 class 了，我们要把这个输入的啊，这上面这一半部分，上半部分也给它改一改 input， 我 们把这上半部分也改一改， 然后让它跟下面稍微有一点点啊，边界 好，这看上去呢就好多了。我们 这里的输入框啊，这种默认格式的输入框啊，很老旧，很不是很好看，我们给它改改，我们指定到啊这个 css 为这个输入框 好，然后我们给它搞点颜色， 这样子就比之前好看多了，但是发现它这种直角框呢，也比较丑啊，我们把它用圆角美化一下， 哎，是不是好看多了，然后字体呢，也稍微大一点。 好，我们现在这个输入框已经变好看了，就到了旁边这个啊比较丑的按钮，把这个按钮呢也给他弄好看一点，给按钮也加一点点样式， 嗯，把这个按钮的颜色也给他改成啊，输入框这个边界的这个颜色 好，然后看到这个字啊，它这个显示的深层，这个字是黑色的啊，不是很好看，我们换成白色的，让它明显一点。 好，然后呢我们再看下，把这个直角边框啊，同样的变成圆角边框， 好，去掉外面的黑框，这样呢就好看多了。 然后我们啊给它弄一点点动画 好，我们这个时候呢还没有创建悬停事件，所以我们还没办法看到再创一个啊，鼠标悬停，悬停到这个按钮上的事件 颜色呢啊，给它加深一点， 好，这个颜色稍微深一点点，当然啊，得益于 vs code， 你 也可以直接在这里改，也是 ok 的。 这时候我们看一下是不是颜色，旋停的时候这个颜色就变深了。好，然后我们接着继续， 我们此时上半部分啊，上半部分就已经啊做好了，我们现在呢要把这下半部分也给它改一改。 下半部分呢，同样给这个 div 啊，指定一个 class 啊，预览盒子 同样的圆角，然后给这个盒子加一点点阴影， 好，这样子我们看到有一点点立体的感觉了。 好，这时候呢我们加一个啊，防止它内部啊有一个预览的这个滚动时候会超出圆角， 然后我们这个预览这里抬头也给它指定一下 class， 给这个标题啊，也指定一下，同样的把这里改一下 background 继承父类， 然后我们接下来，哎到这个预览区域给这个地方也加一个 class， 然后呢我们就要加上滚动条了， 同样继承 flip 的 这个背景 好，这个就啊好看多了。然后我们 还要呃给这个 id 的 也调整一下， 这个实际上大家也可以在完成所有功能之后，再预览了这个 latex 的 表达式生成后的公式，生成这个图片的大小，来啊，详细调整， 我这呢就直接先调整好了啊，省到后面再去一个个测试。 好，我们这个时候呢，我们这个 html 页面就已经完成了，这个 latex 公式的前端页面显示就已经完成了， 那么我们接下来就要编辑啊 gs 部分了。那么 gs 部分呢，我们刚刚说了，我们啊需要， 需要什么呢？需要一个 max jacks， 还有一个 canvas。 那 么我们如何去安装这两个呢？ 啊，很简单，直接 npm 安装， 我们可以看到这里的录的 js 模块，我们这里已经告诉我们安装好了，我们可以看一下。呃， 哎，这里有了 master js， 我 们在哎这里打开 这里就有了一个啊 t s 杠 svg， 点击 s， 我 们需要的就是这一个，我们可以把它啊这个复制过来，复制到我们的。呃， s r c 下面 啊，复制到我们的 infam 下面，因为我们需要在 html 里面去啊调用，所以我们要复制到 infam 下面， 然后呢，我们还需要一个啊 canvas 这一个工具，那么这个工具呢，也是同样的，我们在 npm 中去安装一下 html to canvas。 好，这里安装好了，跟刚刚的步骤一样，我们在这个模块里面找到 html to canvas， 哎，在这里我们找到它的产物，选择最小的这一个 好，粘贴进来。好，这个时候我们就已经准备好了， netx 就 可以转换为啊 blog 文件了。 好，那么接下来我们开始完成 javascript 的 部分啊，我们先在 eframe 目录下创建一个啊 js 目录，做好分类，把这的 js 文件放到 js 目录下去， 然后我们回到啊 latex html 文件里面，我们需要去把我们要用到的啊 text to svg 这个库给它导进来。 好，这样我们把库导进来之后，就可以继续完成我们的 javascript 的 部分。 那么我们首先先创建两个常量， 我们把啊前面绑定的啊前面设置好的 id 给它绑定进来，来获取啊这个书的内容。 我还要再创建一个常量。好，我们这命名为啊预览 d i v 在 这里面呢，同样呢，跟上面一样啊，把这个 id 给绑定进来。 好，我们现在开始实现第一个功能就是实时渲染 latex 表达式到 svg 预览，如果我们输入什么内容，它实时预览什么内容， 那我们就要啊开始去添加一个啊监听事件 a， d， d 添加一个监听事件啊，这个监听事件啊，是一个输入的监听事件。 然后呢，我们要获取到书的内容， 会到书的内容之后啊去除掉空格， 然后呢清除掉预览区域内的内容， 这个时候啊，我们就要做一个判断了，我们要判断啊这个输入的内容是空的还是有内容的，所以我们这里做一个判断， 如果说它是一个空的，那我们就直接返回啊不处理，如果说不是空的啊，我们就开始啊踹一下，尝试一下， 尝试处理的话，我们创建一个啊 span， 我 们这里啊创建一个 span， 然后呢我们去使用啊 majet 适用的这个语法去包装 natex 的 表达式。 好，然后我们把我们创建的 span 添加到预览区， 然后我们就可以开始啊调用啊 max， jax 的 渲染引擎去处理这个数学公式了。 好，我们这里呢去提取 svg。 好，然后如果你这个 svg 它生成成功了，那它肯定是有内容的，所以我们这里加个判断， 如果它有内容的话，我们先去清除掉啊预览区， 然后去把这个 svg 啊克隆到预览区。 好，然后我们刚刚这里 try， 就是 尝试啊，如果尝试这里出现了报错错误，我们要把它捕捉进来，我们这里捕捉错误， 那么这个错误呢？我们如果打印到，如果我们把它打印到呃网址里面啊控制台的网址， 那就会有点麻烦，因为你要啊进入到调试模式才能看得到控制台设置。所以我们这里呢还有一个方法啊，就是直接在前端去显示出来，我们看一下有没有相关的显示的一个方法啊，找到系统内里面， 然后我们在这看啊 delog 对 话窗，但我们这应该不需要用对话窗，我们直接这里有个 message 消息通知内，在这里面找一找。哎，有一个显示吐司消息，在这里面，我们传入我们需要显示的内容就可以了， 然后下面的 q 选项我们看一下啊，这个消息类型应该也能用上。哎，这有个错误，那我们就把就用这一个方法去显示进来啊， 那我们啊提示 预览渲染失败，然后把内容打印出来 啊，这个消息类型是一个错误类型。好，回车，那么我们这里完成之后可以到啊 文件资源管理器中，在这里面打开，因为右边这里的这个预览窗口呢，它是禁用了一些功能的，所以你是看不到它的这个实时效果，所以我们到这个文件管理器去预览一下。 好，我们实时预览它已经出来了。其实之所以没有啊生成对应的 latex 格式，是因为我们在代码中指定的 gs 文件路径是以这个工程的路径 为导入的，而在资源文件管理器里面，它是啊以我们操作系统的根目录来导入的，所以这里并不是说我们没有完成，你可以把它啊翻译成插件，我们到 eda 里面显示，它是可以正常显示的， 所以我们这里继续， 那么我们现在就要完成的。是啊，点击生成按钮，然后导出图片的 bomb 格式，然后生成对应的图源。所以我们这里 去创建一个方法啊， 这个方法不需要传入参数啊，因为我们这个方法需要把它绑定到生成按钮这里，这是为什么？我们刚刚在这里预留了一个点击事件， 当我们点击按钮时候，它就会啊执行这里面的方法。 好，那么我们现在呢就要开始来完成这个方法，那么我们首先先获取预览区的 svg 元素。 好，我们先把这个 svg 获取出来， 那么这里呢我们也要去做一个判断，如果啊我们像刚刚这样子，他没有生成 svg， 或者说 svg 没有是是一个空值的时候， 我们这里就不能再去啊继续获取 svg 了，我们这时候要做一个提示，所以我们这里做个判断，看一下这个 svg 啊，到底有没有 同样的啊，调用上面这个方法，我直接把它复制下来。 好，这里的话还有一种情况有可能是它的啊， latex 表达式可能是不正确了，所以我们这里也做一个提示， 这里呢我们没有捕捉错误啊，所以不需要加这个， 给一个啊警告，然后直接返回。 那么如果 svg 是 存在的，我们就尝试一下， 我们先将 svg 先把它训练化为字母串的形式， 然后呢我们去创建 svg 文件的 bob 对 象。 好，然后我们去创建一个啊链接 url， 那 么我们再创一个 image 对 象去加载 svg。 好， 这里图片加载完成后，我们就开始进入处理 这里，当图片加载完成后开始处理， 我们这里创建一个 canvas， 然后我们设置 canvas 的 尺寸和图片保持一致。 好，我们这里设置它的宽度和图片的宽度一致，然后是啊高度， 然后呢我们去啊获取二 d 图， 然后我们将图片复制到 canvas 上， 这里导入图片， 然后我们这个时候就可以将 canvas 内容转换为编辑格式的 blob。 看，这有一个方法是 to blob， 然后我们创建一个 png 图像的啊，链接幺二幺。 好，那么我们现在呢，就已经获取到 blog 文件了，也 blog 的 数据了，我们现在既然啊拿到了数据， 那么我们就可以把这个数据传到我们的 e d a p i 中， 我们看一下我们要传入的这个 api pcb 内啊，多边形数学类 啊，就是这一个， 那么在这里面我们要传入我们的 drop 数据，然后啊图像的宽高， 这里的容差简化平滑啊，这些呢是和我们导入图片是差不多的，我们可以啊，在 a 中去看一下 我们导入图片， 那它实际上也就是这一个的数据，那么这个数据呢，我们要生成了具体的这个公式的。呃，图片之后我们再去调整，所以我们先空着。 好，然后这里啊，不要忘记把分号打上，我们接下来呢，去进一步创建 pcb 的 图源，我们现在获取到数据之后就可以创建图源了， 我们可以先看一下啊，这个 返回值。 好，那么我们再看一下我们需要呃的图像的，这里创建 图像圆出去，复杂多边形。好，那我们继续。嗯，再写一个串， 我们先看下，我们要啊，传入的。 好，我们先来看下我们要传入的这个几个， bbox 左上点坐标 x 以及 bbox 左上点坐标 y。 那 我们肯定是在原点去创建这么一个啊图像，所以我们这里就直接设置为零。 然后是我们的啊复杂多边形数据， 然后是我们要创建的一个层吧，对，这个层，我们要创建的这个层呢，是在文档层，好，抠下来 再看一下，还有什么要传进来的啊？宽和高，宽和高，那就是对应的图片的宽高。 好，我们这里，哎，少了一个逗号。 好，这个时候应该是没有什么问题了，然后我们继续把这个错误捕捉的给它写进来，这里少一个分号。 好，错误捕捉，错误捕捉的话跟前面我们前面的这个一样， 我们这里呢，错误就说明就不是这个了，是图像图源创建失拍 好了。然后我看到，啊，我们刚刚是不是还有一个少了， 这里 canvas to bulb， 这里后面 还缺少了东西， image 啊，杠 p n g 类型好分好。 然后啊，我们在这里啊，在这个的后面 啊，还要去做一件事情还要去做一件事情。我们要啊设置图像，呃，图片的原，然后去加载， 然后我们这个时候啊，这个图片就应该生成成功了，我们这里就打一行啊，吐司消息，这里就啊不是 excel 了，这里应该是成功， 我们要提示一下，生成成功，位于文档层 坐标原点处，好，把这个错误去掉， 因为这里是成功了，还没有错误，然后我们在这里才是 try， 所以 在这里要啊加上错误捕捉，这里的错误捕捉呢，就跟这个一样，把它复制过来， 好对齐一下。然后这里呢是生成失败了。 好，那么到这里为止，我们的啊，这个 netx 这个插件啊，就已经完成了，那我们现在呢，就可以去验证一下，看一下有没有什么问题。我们这里就直接 build 一下。 好，看样子是创建成功了，我们看一下，刚刚还没有点保存呢，我们重新再 build 一下。 好，看样子也是成功了。检查一下，确保没有什么问题，那么就可以到 eda 中去试一试。 扩展管理器，导入扩展好，选择文件，这里的文件路径，把它复制一下， 我们不需要外部交互功能，看一下 latex， 看有没有。哎，这个也行吧，这个圆点是空白的。 看样子应该是我们格式化有问题，我们看下是哪里行，可能不太对，没有对齐，我们重新格式化一下， alt shift 加 f 格式化，然后再去保存， 再重新 npm run build， 构建一下。 好，构建成功了我们再进来啊，把它删了，删除扩展，重新导入，重新导入扩展， 哎，现在就可以了，我们可以生成一个啊公式看一下。 伸展成功，哎，我们在远点可以看到了，但是现在他的这一个啊，字体还有一点点弧，那么这个字体有点弧的话，我们就去调整一下， 我们需要的， 我们需要的啊，这个我们看一下啊，是在内 pcb 里面里面去创建啊，再辅它多边形，这里面有一个容差，把这个容差啊略微调高一点点看看。 好，我们把这个容差调到，呃，零点三，零点三试一下 重新 n p m run build 啊，先保存 好，已经 ok 了，我们再来看一下，把原来的放一边做参考，然后再把这个扩展删掉，重新导入 natx 表达。是啊，这个看一看，哎，是不是好很多了？是不是好很多了？那我们现在我们的 natx 的 这个公式显示这个功能就已经做完了。 我们还有一个是 markdown 的 这个功能。好，我们 latex 功能做完之后，就先放到一边，然后看到 markdown 这里。好，那么我们接下来来完成 markdown 的 部分。那么在 markdown 的 部分呢 啊，我们可以把原来 latex 给放过来，然后 因为啊 latex 这里面的一个预览窗，我们是上下结构，但是在 markdown 里面，我们打算是左右结构，就像开源平台的 markdown 编辑区一样，左右结构，左边编辑，右边预览。呃，所以这样的话呢， 那么我们还是，呃，还是把还是把前端页面重新重构一遍吧。 后面的 js 部分其实又很好说， js 部分的话，呃，相对来说基本上是一样的，基本上是一样的，原理上基本一样，只是我们可能有一些要稍作变更。那我们先进来之后啊，把名称改掉 啊，同样的，这里给它改掉， 这样的话啊，先导 html to canvas 迷你点 gs。 我 们之所以要用这个，是因为这个库呢，可以把 dom 转换为图片，而原生的 canvas 是 没办法把 dom 转换为图片的，所以我们现在呢， 还缺少一个啊 markdown 的 一个啊处理的库啊， m a r k e d markdown。 好，这里已经安装好了，我们找到呃呃 market 这里，在 lab 下面找到 emd， 点 gs， 把它复制， 然后同样的放到我们的 gs 里面。好，这里面呢就把它导进来 好了。那么我们啊现在先把啊前端部分的页面给它重构一下，换成左右的这一种。同样我们也要用 diy 啊，因为 markdown 的 编辑内容比较多，所以我们这里用的是这一个输入框， 同样给一个提示，再次输入 mark 到文本。 好，然后我们要实现的是左右域栏，所以这里再加一个 div， 在这个 d i v 里面再套一个 d i v， 然后在这里面打上我们的标题 啊 预览，然后创一个按钮生成， 这个按钮生成其实和后面我们在这里的是一样的，因为我们 markdown 也是啊，转为图片 boom， 然后在啊生成的旁边啊这里创一个 d i v 作为预览， 然后还给上 id 看下面。好啊，虽然现在的界面看的比较丑陋，但是我们把 style css 加进来就会好很多了。 好，那我们现在开始写啊 css 的 部分。首先啊玻璃，玻璃其实跟前面一样，可以直接拿过来 输入窗口，也可以利用上， 这是我们这里的。呃，输入窗口应该是这一个文本的窗口， 在这里的上方有一个 class。 好， 现在呢，它又是一个啊，左右的一个结构了， 把这里关掉，现在就是一个左右的结构了，这里的间隔还可以再还加大一点。 好，然后呢，我们去编辑这个输入框， 我们前面的颜色保持一致，同样加圆角 啊，静止拉伸啊，不要给它拉来拉去的。 好，然后我们看一下啊，还有哪里需要去加的？我们刚刚加的是这里，然后到啊，这还有个 div， 这个 div 呢，就是预览 啊，这个 div 预览区的 div， 这个预览区的 d i v。 啊，我们刚刚好像也有一个预览区的 d i v。 复制过来。 好， 但这里我们发现它是不是太窄了，还是要调整一下， 这样子才能让它对称嘛。 颜色，背景颜色不管它，圆角不用管啊，应用保留，然后显示这里。哎，都保留， 那么我们接着继续啊，接着继续到这个 d i b 头部的 d i b。 好， 然后是这个开头，开头的话，我们前面那里也有一个开头， 这个开头的话就直接 啊，直接就设置一个字体大小和颜色。 好，然后我们接着去继续。到了 啊，生成，就生成的话，就直接用之前的吧，之前不是有一个按钮的吗？啊，把这个复制过来。 好， 然后是 我们这里有一个 id 是 html 预览区域的，我们这里把这个预览区域的也加进来， 同样呢，这里我们也要给它创一个啊，滚动条 x 轴方向也创一个。 好，我们还要去啊，创一个代码块样式， 那这就不是一样的吧。 好，重新开一下预览， 看下哪里要调整一下 跟盒子相关的。这里我们啊设置几个编辑 间距，二十 p 叉，然后是这个啊，空间 好，现在就好多了，我们现在的啊，页面就已经完成了，那么接下来就是啊加 script 的 部分，前面已经导入了这这几个库，然后我们后面就接着完成加 script 部分， 那我们这里的输入全部替换掉。 好，我们输入，然后实时预览，这里不需要去啊，删除空格， 呃，这个是 latex， 这个也把 latex 的 给换掉，改成啊， md text 好， 我们，呃，接着看一个输入监听事件啊，那么这里面呢， 肯定是不能用 mask 了，这里面我们肯定是要去改动的，所以这里就删掉吧，然后我们这里重写串 补珠， catch 啊， yellow， 呃，错误显示的话，保持一样肯定也是掉 eda 的 这个 api。 那 你这那，这里我们就是 markdown 的 一个解析。 好，然后啊，这里一看就要比我们之前啊 latex 要简单多了。 latex， 我 们这里的实时解析用了这么多行， macdunk 这里只用啊这一点点就够了。好，然后是深层的部分，那么在 before 之前的啊，这几行我们肯定是还用不了。然后 前面，这里， 前面这里应该可能也要去重写 啊，这里删掉了，然后我们这里就不是 svg 的 判断 啊， 然后是插入这里，这里的话我们略微和啊前面方法不太一样。 这里呢，因为他是将 dom 去转为图片，而我们这里的预览窗只有这么大，所以你如果说直接截这个预览窗里面的内容啊，截预览窗里面内容，那他肯定 啊生成的啊，这个，这个，这个图片它是一个不全的，它只有一半，而且也容易截到滚动条，所以我们这里要去啊刻拢一个副本， 当然你们也可以自己去试一下，因为我之前的想法就是直接去 截取，但是确实是情况不太乐观。好，那我们这里就直接创一个啊副本 啊克隆。 好，这样我们全部给它克隆一下， 我们把这个 啊克隆到屏幕的外围去， 这样就看不到了。然后呢，我们把这个 啊添加进来， 那么这个时候我们就可以去调用 html to canvas， 把 dom 转为啊我们的 canvas， 需要转换的 bob 数据。好，那么我们现在就直接啊转换 ctrl 窗口， 然后这个时候我们把副本给它清除掉， 那么我们现在就可以去转换为 pdf 文件了。 这里呢，就和啊前面的是一样的， 呃， p n g u i l， 这里其实是，呃，用不到了， 看一下 这里应该是没有，这里应该是没有什么问题，是我们这里的名称啊，不是 i m g， 是 chaos， 然后这里也是 零点三，还是用原来的数据看一下好，然后接下来的其实都是一样的，后面的逻辑都是一样的，因为我们 前面就是要得到这个 bob 数据，然后后面的所有创建图源，这个就是完全按照一对 a p i 的 方法去写， 看一看我们前面这里是不是删了个什么东西，这里多了一个删掉，然后这里的 i m g， 这里也不用， 这里也不对，哎，这里也不对，对，这里也不对，这里要换掉， 嗯，应该是，应该是没有什么问题了， 应该是没有什么问题了。好，我们保存全部保存终端，新建终端啊， biu 一下。 好，看样子是构建成功了。那我们就直接，哎，看一下能不能转 markdown 了啊， 看看 doc tools， 嗯，不需要，也不交互。 markdown， markdown 解析错误，看样子还是有问题， 再来检查一下。你看到这里这个地方啊，是不是不对啊？应该是 html 啊，现在应该没问题了，因为我们是移植的，是从 latex 移植到 markdown， 所以 啊，难免会有一点点错误。全部保存，然后再去 n p m run build 构建下，我们再验证一下，看下还有没有问题。 好，我们再导进来看一看。 嗯，看样子是可以了 啊，看样子是可以了，看样子是没有问题了。中文测试 生成成功，哎，可以了，看样子是可以了。呃，那么这个精度还是要调一下啊。这个，呃，这个值还是要调一下， 这个容差还是要调一下。容差，我们看它越大啊， 越大睿化越严重啊，越清晰，让我们稍微调大一点点。 我们刚刚调的是多少？零点三，调到零点四五。好，我们接着是。哎，一并把窗口给处理掉，我们现在窗口看到没，很高，我们这个窗口很高，他 降下去一点，然后在 markdown 这里的话，应该往两边再扩一点点。好，我们现在开始。那么啊，窗口的调整是在 s r c index 里面，我们把这里我们一开始设置是五百，这里调到， 呃，三百，看一下，这里我们要让它再宽一点，调到七百，然后这里 四百。好，这里我们就应该来说是差不多了， 然后对于啊详细的数据转换，我们可以去切到啊， debug 模式下看一下， 因为我们是直接按照了 api 给的数据格式去转换的，我们还没有看过 debug 模式下的日记，这里加一下， 把刚刚的改动编一下，先全部保存 好，这里引下去。 那么进入到 debug 模式看啊，你要按三次 f 十二， 连续按三次 f 十二，它才能进到控制台，我们可以看到啊，这里有很详细的日期，那么我们可以把我们刚刚编辑的插件导进来了看一下。 好，我们可以去把这一个数据打印出来看一看啊， 然后啊 u r l 也可以打印一下，这样子我们可以把图片下载下来，把这个图片下载下来之后，我们再导到那个图片编辑器中去，看一下我们到底要调到哪一个值，它的转换效果最好。 然后，呃，我们看一下还有哪个数据是可以弄出来看一看。这里的数据也可以弄出来看一看， 在 markdown 里面，同样的 同样的 全部保存，然后编辑 好，一切就绪，我们导入进来把。哎地址复制一下， 复制路径， 呃，看一下， 你看现在这个高度稍微好一点，我们还可以再往下去缩一点点高度就更好了。转换之后，这里有一个啊 blog 文件的链接， 这个文件的链接我们抓包也能抓到 啊，这个文件链接在这里， 我们可以去把这个用截图功能啊，用截图功能把它截下来， 截图功能给它截下来，然后把它保存到保存到呃，图片中。好，先留一下，然后我们在这里看一下我们刚刚打印的一些数据， 这个就是转换后的复杂多边形数据，然后这个复杂多边形数据传入到我们创建图像的方法里面生成的图像圆 图像图源数据。好，这个就图像图源数据啊，就是我们生成的这个图像图源数据，我们可以看到这里的字体，我们可以通过。啊，刚刚我们导入的啊，我们刚截图的图片，要把它导进来来看一下到底调到什么程度下，它会更清晰一点， 感觉在零点三四左右， 零点三四左右是比较清晰的，那么我们啊，在我们的 netx 点 html 把这个值改到零点三四，我们这零点三很接近，零点三四左右就很清晰了。 markdown 的 话也是一样的， markdown 的 话也是一样的，我们 markdown 打开 生成一下，然后看看啊， markdown 转换出来的图像图源数据在这里， 然后我们传入到了创建图像的方法里面生成的图像图源的数据，然后我们去网络下看看能不能获取到，看到可以获取到的，我们可以把这个图片啊，同样的，哎，这里可以直接保存，可以直接把它保存到，呃呃， 图片里面。好，然后在这里面给他导进来看一看，到底在哪个清晰度啊，哪个容差他的清晰度最高。 差不多零点四九，零点四五，零点四九，零点四五吧，差不多。我们看一下，我们就可以在我们的代码里面给他改到零点四五的啊，我们这里就是零点四五的值，那就不需要去改了 啊，我们再看一下我们刚刚改动的窗口，呃啊，这个窗口已经可以了，这个窗口啊，大小也正好合适。 那我们整一个啊，这个 dos tools 文档 插件，文档工具的插件就已经啊开发完成了，那么我们现在如果要上传的话，我们还需要做以下几点，我们要去 change log 里面啊，把自己的变更日期写上去。 嗯，我怎么还没有编辑权限吗？可能我这这个键盘是不是有问题了啊，那，那就，哎，可以了，这电脑反应太慢了。好， 这里呢，我们就是初设版本，然后你可以把你新加的功能。好，我把新增功能写上来 看，我们在写全指 look 时候用的也是 markdown 啊，所以呢，我们这个工具还是很实用的。 新增功能一，支持 markdown 啊， 文本转啊， pcb 文档层显示啊，我们还做了一个什么功能呢？还做一个啊， latex 表达式。 好，那我们创建 log 就 已经写完了，然后 readme 的 部分呢？ 同样的啊，这里我就不去详细的写了， readme 这里呢就是写你的，呃，操作说明，你这个插件要怎么用怎么用，那我这里就不去写它了。 好了，那我们的插件开发呢，就差不多，就， 那我们回到 ppt 中，我们对我们所有的内容做一个简单的总结。 在本讲内容中，我们从零开始构建了一个 docs tools 文档工具，现在你可以通过 markdown 和 latex 表达式来生成布局美观的文档和复杂的公式了。在此呢，也欢迎与我们共建好用的加一创 eda 编辑器插件生态， 也欢迎大家使用加一创 eda 扩展 api 来创建更多好玩有用实用的 扩展插件。我们我们今天呢，主要是，嗯，根据拓展插件的征集令给大家开个开营仪式。本次的活动时间是从 一月十六号到三月三十一号，我们其实活动是持持续很长的，只是这个是我们是第一期的一个活动，所以它是嗯维持的是接近三个月的一个活动流程。呃，活动时间 我们的参与的对象是不限的，你可以是嗯开发者，你可以是工程师，你也可以是创客团队，只要你会写代码，然后然后 会使用加密创 e d a 软件。你写的这些插件的话可以分为这几种。我我们这边只是举例，比如说嗯效率类的，就一键泵泵表整理，然后智能布局助手以及批量的处理工具。 然后还有第二部分就是专业增强的，比如说仿真的格式化呀，以及模块的一些分析这样子的一些插件。然后第三个部分就是生态的连接链， 嗯，供应链查询或者是生产文件的优化，像这一块是属于生产连接类的。而第四个就是学习辅助，辅助类的，嗯，电路教学工具以及调试的模拟器设计规范的检查这些这四种都是 ok 的。 嗯，当然我们只是举例，有这四种都嗯是可以的，然后如果你想要做其他的也是也是没有问题的。我们只是嗯举例给大家，然后我们的审核标准就是嗯用户体验优先，就是 我们会呃会有给我们，嗯，大家做完这个插件传上去了之后我们会有审核，审核完了之后，呃上传上去，上传上去了之后我们会邀请大家来我们的体验，大家写的一些插件，然后给到我们一些反馈。 所以说我们的审核标准，第一就是体验优先，用户的体验，比如说页面的设计啊，交互逻辑这一块的，然后其次就是我们的这个代码质量也是非常的重要的。 然后第三个部分就是使用价值一，一定要解决真实的一个问题，比如说针对某一个场景有明确的应用价值，以及提高我们整个画图的一个效率。 然后我们针对嗯来参与我们活动的开发者是有一定的奖励的，比如说基础奖励，只要你符合我们这个征集令的要求，然后并且审核通过，就可以获得五百元的基础奖励。然后 嗯到了季度的时候，就是比如说这个月的评选是在嗯这次的活动就是在三月底，三月底我们就会进行一次季度的评选，然后第一名的话就会有三千块钱加荣誉证书，而第二名就是两千块钱加荣誉证书 啊，第三名就是一千块钱加荣誉证书。我们整一个的那个激励的奖励还是非常的不错的，就是只要你通过我们的审核了之后， 嗯就可以获得五百元的基础奖励，你也可以选择现金或者是京东一卡。然后额外的奖励就是我们进行就是三个月内嗯大家上传的一些插件，然后我们进行评选，是由我们官方进行评选的，然后 会赠送大家额外的奖金，因为我们也知道开发也是非常有难度的，所以说我们也希望大家的嗯知识能够能够得到尊重。