整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
vm内存模型是什么呢？jvm内存模型是一类用于描述由java栈、java堆、方法区、本地方法栈和程序计数器各部件构成的Java程序。在执行过程中，由jvm管理的不同数据区域的一类图表。jvm内存模型每个区域储存各自不同的内容，且都有其特定的作用，如线程私有的有虚拟机栈，本地方法栈和程序计数器，线程共享的有方法区和堆区。
1.jvava栈用于描述Java方法执行的内存模型
2.Java堆用于垃圾收集器管理
3.方法区用于存储已被虚拟机加载的数据
4.本地方法栈用以为虚拟机使用到的Native方法服务
5.程序计数器用于指示当前线程所执行的字节码的行号
jvm内存模型模型的绘制方法非常简单易学，通过以下五个简单步骤，即可轻松绘制出一幅专业的jvm内存模型模型，不信？接着往下看！
第一步：点击下载“亿图图示”软件，或访问在线版亿图图示。启动软件！
第二步：新建jvm内存模型。在搜索栏中输入“jvm内存模型”进行搜索。然后从例子库中，选择一个模板，点击打开jvm内存模型模板。
第三步：先点击画布中的jvm内存模型，点击需要修改的部分，可将左侧符号库中文本、边框和标题、图形符号等素材一键拖入画布中，进行修改图形与符号，操作非常方便。右侧面板可修改主题可配色，进行美化等操作。
第四步：双击文本框，可替换jvm内存模型模型模板里的文字。
第五步：完成jvm内存模型的绘制后，可以点击右上角的保存、下载、打印、分享等按钮，对绘制好的jvm内存模型作品进行存储。也可以将作品导出为图片、SVG、PDF、PPT等格式。
亿图图示是一款专业的可视化绘图工具，在任何场合都可以用于展示创意、分享想法。软件内置260多种绘图类型，丰富的模板素材可以帮助快速绘制jvm内存模型、网络图、流程图、思维导图、商务图表、组织结构图、甘特图、地图、线框图以及网络拓扑图等专业图形，提高工作效率。使用这款软件无需绘图基础，可以直接选择jvm内存模型的模版，然后进行拖拽式操作，即使是新手也能迅速创建出有专业水准的图表，所有jvm内存模型模板都支持一键套用。
绘制jvm内存模型，推荐使用亿图图示，直接套用多种模板，快速绘制出符合要求的jvm内存模型模型，提升效率！
1、模板丰富，颜值极高
绘制专业的模板，就得选用专业的软件，亿图图示模板非常丰富，有260种绘图类型，26000+个矢量图形，3000+个绘图模板。即使是新手，也能轻松实现创意表达，高效制作专业图。
1、操作方式简单便捷
软件支持进行拖拽式操作，并且可自动吸附及对齐，让您的操作体验更加舒适流畅。
3、多平台，易适配，易查看
软件支持Windows、Mac和Linux三个系统，V10.1 版本支持桌面版与网页版两种方式云同步存储，文件可一键分享好友，非常便捷。
4、导入格式多
可以一键导入Visio，SVG类型的文件，也可以批量转化Visio，比如可以批量转化一整个目录的Visio文件到Edraw文件，一次性实现文件众多文件转移，操作便捷。
5、支持多种导出格式
可以一键将图表导出为各种格式，如图片，Html，PDF，SVG，Office等，让图表内容更加清晰直观，增加美感。
vg在线编辑器 https://editor.method.ac/
使用的是polygon标签
该标签能创建含有不少于三个边的图形。
如下
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polygon points="0,10 5,2 5,7 10,0"/> </svg>
效果如下
其坐标为路径
poliline 为曲线
同样输入的为坐标
此时为了和上一个区分，将file设置为不填充，设置描边为black
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polyline points="0,10 5,2 5,7 10,0" fill="none" stroke="black"/> </svg>
效果如下
其中 填充为非零绕数原则
path类似于笔的路径
其拥有一个属性d，该属性d由下方的单词的首字母组成。
Moveto
画笔的起点
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M10,100"/> </svg>
Lineto
该执行从画笔的起点到位置绘制一条直线
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M0 0 L0 20 L40 0 "/> </svg>
Curveto
绘制贝塞尔曲线，由三个参数组成，考虑两个控制点
直接选择画板手绘吧，实在看不懂了，貌似缺少了椭圆的一些数学知识
总结
绘制一颗心，以下是在网上找的
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M1,3 A2,2 0,0,1 5,3 A2,2 0,0,1 9,3 Q9,6 5,9 Q1,6 1,3 Z "/> </svg>
没看懂。。。
text元素
依旧当做图片处理
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <text x="0" y="20" fill="red">Hello world</text> </svg>
此为属性，定义任何类型的线条
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <text x="0" y="20" stroke="black">Hello world</text> </svg>
对图片模糊
先引入图片
<image x="0" y="0" width="100%" height="300px" xlink:href="http://127.0.0.1/111.png"/>
此时图片显示
接着定义可复用的组即defs
defs 标签为可复用的组标签
使用的是file用于存放滤镜的地方
使用file标签
使用feGaussianBlur滤镜即模糊滤镜
使用的in的参数为SourceGraphic表示图形作为原始的输入
此外还有背景图，通道等
stdDeviation 表示模糊的程度
完整的如下
<defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs>
接着再次使用滤镜
<image filter="url(#f1)" x="0" y="0" width="100%" height="100px" xlink:href="http://127.0.0.1/111.png"/>
一个模糊
效果不错
此外还有阴影渐变，等滤镜，等就太复杂了，设计到矩阵变换等高等数学的内容，自己有心无力。
使用adobe ai 生成svg文件
创建一个画板
选择字符
添加字体
转曲
获取svg代码
画出图像
代码如下
<!DOCTYPE html> <html> <head> <title>svg页面</title> </head> <body> <p>这是一个svg</p> <!-- svg 图形的命名空间 --> <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve"> <g> <path d="M722.2,346.5c17.1,128.1-27.4,231.2-133.3,309.2c-36.1,26.6-79.1,43.8-123.5,49.7c-109.2,14.4-200.7-14.2-274.5-85.9 c-62.1-60.1-93.1-133.1-93.1-218.8c0-103.3,45-188.2,135.1-254.6c36.1-26.6,78.9-44.2,123.3-50.2 c128.7-17.4,232.7,23.8,312.1,123.6C697.2,255.9,716,300.4,722.2,346.5z M709.2,403.7c1.8-83.1-27.7-154-88.5-212.8 c-58.6-56.5-128-84.7-208.1-84.7l-32.3,66.3l35.2,7.1l27.5-27.5l48.5,3.2l9.7,25.9L472,210.3v17.5l18.1,3.6l8.4-13.6l32-20l-1,13.6 l12,20.7l-14.2,14.9l9,8.7l-21.3,1.3l8.7,17.5l-46.2,22l7.1,26.2h-14.5l-6.5-25.9l-33.9-0.6l-6.1,10l-13.9-6.5L387,322.1l18.1,21.7 l-0.6,23.9l19.1,14.2l111.2,12.6l35.2,24.9l-4.2,61.7l-76.6,76.6c-5,5-9.8,18.7-14.5,41.4c-4.5,21.3-6.1,36.5-4.8,45.6l-11.6,13.3 c-9-17.9-20.8-45.4-35.2-82.4c-3.4-12.7-6.5-28.9-9-48.5c-1.9-16.2-3.9-32.4-5.8-48.8l-48.5-42.7l43-50.7l-17.8-25.5 c-27.4-5.6-45.1-10.6-53.3-15c-8.2-4.4-22.3-16.8-42.3-37l16.8,32.6l-11.3,4.8l-26.2-49.1l5.2-45.9l-8.1-32.3l-25.2-24.6l-18.4-4.5 l-16.2,11.3l-17.8,4.5c-49.6,57.3-74.1,123.3-73.4,197.9c0.8,76.3,32.7,151,87.1,204.4c58.1,57,128.4,85.4,210.9,85.4 c81.9,0,151.8-28.7,209.6-86C675.7,552.8,707.5,479.1,709.2,403.7z"/> </g> </svg> </body> </html>
到此，可以发挥ai的想象啦。包括绘制图形，使用滤镜，画图图标等等，哪怕使用图片导入ai，绘制出矢量图。完美的ai和html的一次结合
http://svgjs.com/ 使用该svg.js框架可以快速的操纵svg
s2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。
安装
yarn add js2flowchart
使用
index.html
index.js
我们直接在文本域中输入自己的代码，如下，左边会直接生成流程图，这只是一个简单的示例：
js2flowchart获取您的JS代码并返回SVG流程图，适用于客户端/服务器，支持ES6。
主要特点：
定义抽象级别以仅渲染导入/导出，类/函数名称，函数依赖性以逐步学习/解释代码。
自定义抽象级别支持创建自己的抽象级别
表示生成器，以生成不同抽象级别的SVG列表
定义流树修改器以映射众所周知的API，例如 .map，。forEach， .filter到方案上的循环结构等。
销毁修饰符，用于在方案上用一个形状替换代码块
自定义流树修改器支持创建自己的流修改器
流树忽略过滤器完全省略一些代码节点，如日志行
聚焦节点或整个代码逻辑分支突出显示方案的重要部分
模糊节点或整个代码逻辑分支以隐藏不太重要的东西
定义的样式主题支持选择您喜欢的样式
自定义主题支持创建自己的主题，更好地适合您的上下文颜色
自定义颜色和样式支持提供方便的API来更改特定样式而无需样板
用例场景：
通过流程图解释/记录您的代码
通过视觉理解学习其他代码
为有效JS语法简单描述的任何进程创建流程图
以上所有功能可以直接到github上详细了解，用法太多，这里就不在介绍了！
这么强大的东西，有人肯定说如果在开发的时候实时看到流程图有助于理解代码，官网提供了插件（我在最新版中测试失效了，不知道是否是我使用的有问题还是插件本身的问题），如果感兴趣的可以到扩展商店搜索code-flowchart。如果测试成功，欢迎到评论区分享。以下是我vscode版本和官网的插件使用截图。
如果利用好这个插件，可以开发出Chrome插件，以及其他JavaScript编辑器或者IDEA的插件，由于官方github已经几个月没更新了，所以还不知道未来会不会支持！
来都来了，走啥走，留个言呗~
IT大咖说 | 关于版权
由“IT大咖说（ID：itdakashuo）”原创的文章，转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信：ITDKS10（备注：投稿），茉莉小姐姐会及时与您联系！
感谢您对IT大咖说的热心支持！
相关推荐
推荐文章
据说这份高考卷，只有程序员能得满分！
干货分享：一次Java内存泄漏排查实战
这个程序员实在是太帅了
最近活动
融云微课堂
线下活动 | Apache Flink 1.9 版本即将发布，新版本有哪些新特性？
线下活动 | 阿里云实时计算专场沙龙，与你探讨大数据实时计算的解决方案
点击【阅读原文】更多IT技术圈干货等你挖掘
阅读原文
*请认真填写需求信息，我们会在24小时内与您取得联系。
