Giter VIP home page Giter VIP logo

Comments (7)

hizzgdev avatar hizzgdev commented on May 23, 2024

你好,@onlyoneice ,非常感谢你的支持。

其实这是个已知的问题,但是我还没有很好的解决方案。不如我先来介绍一下jsmind 以及其保存图片的原理,看看你(或者其他有兴趣的朋友)有没有什么好的思路:

jsMind 在内部构造了一个节点树,树上的根节点就是脑图的主题,子节点就是不同的分支。

显示脑图时,jsMind 首先把每一个节点都映射到一个 html 元素上,填充节点内容,并计算出每个节点尺寸和坐标,令这些html元素绝对定位到指定的位置,然后根据这些坐标,在一个背景画布上绘出连接线。

保存图片时,jsMind 将每个节点也绘制在背景画布上[1],并利用画布可以导出图片的特性,生成了图片。

此问题出现在上面[1]的地方,html5 里的 canvas 并不支持根据 html 片段绘制其被浏览器渲染后的样子,如果要画出html的节点,不仅需要自行计算该节点的大小和位置,还要处理文本的换行,复杂的样式等,相当于要实现一个 html 渲染引擎,而这就比较困难了。

所以在我目前的实现思路下,还不能很好的处理 html 节点保存为图片的问题。

from jsmind.

ice-bin-ux avatar ice-bin-ux commented on May 23, 2024

非常感谢您的讲解,我也在寻找方案,如果进展push给你。

from jsmind.

qboy0000 avatar qboy0000 commented on May 23, 2024

利用html2canvas,然后将canvas来保存数据,不知道可行不可行。有空试试。

from jsmind.

hizzgdev avatar hizzgdev commented on May 23, 2024

@qboy1987 感谢你的推荐,最近我试试这个方案。

from jsmind.

hizzgdev avatar hizzgdev commented on May 23, 2024

这个pr[https://github.com//pull/42] 对于图片的问题可以很好的解决,等测试后 @onlyoneice 可以一试。

from jsmind.

hizzgdev avatar hizzgdev commented on May 23, 2024

#47

from jsmind.

Spongebobo avatar Spongebobo commented on May 23, 2024

html 模式下 保存图片 节点内容显示的是html代码

请问你有最新的进展吗?

from jsmind.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.