用G6去完成一整个图例的时候,当包裹它的容器满足不了包裹的需求时,我们就需要引入缩略图来解决问题了

缩略图使用方式很简单

引入插件配置就可以了

当我们使用多张图片进行绘图(G6支持使用图片进行构图,原理同canvas),缩略图就可能因为图片没有加载出来而照成缩略图图片缺失

解决方式也挺简单

首先去加载图片,然后再渲染canvas节点

const mulitImg = [
'https://gw.alipayobjects.com/zos/rmsportal/FzzhqzypSpatvIQEYBOJ.png',
'https://gw.alipayobjects.com/zos/rmsportal/FGzsRAmHzqJYgjXrpVDt.png',
];
let promiseAll = [], img = [], imgTotal = mulitImg.length;
for(let i = 0 ; i < imgTotal ; i++){
promiseAll[i] = new Promise((resolve)=>{
img[i] = new Image()
img[i].src = mulitImg[i]
img[i].onload = () => {
resolve(img[i])
}
})
}
Promise.all(promiseAll).then((img)=>{
// 利用promise来进行图片的异步加载
图片也可以使用base64编码进行加载,base64格式的图片会跟着js代码运行,不会在进行外部资源访问
})

有想法的可以去玩玩

codepen地址

G6文档

先加班,有时间补充

G6踩坑日记的更多相关文章

  1. AI相关 TensorFlow -卷积神经网络 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  2. 人工智能(AI)库TensorFlow 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  3. hexo博客谷歌百度收录踩坑日记

    title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...

  4. Hexo搭建静态博客踩坑日记(二)

    前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...

  5. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  6. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

  7. React Native Android配置部署踩坑日记

    万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...

  8. 人工智能(AI)库TensorFlow 踩坑日记之二

    上次 踩坑日志之一 遗留的问题终于解决了,所以作者(也就是我)终于有脸出来写第二篇了. 首先还是贴上 卷积算法的示例代码地址 :https://github.com/tensorflow/models ...

  9. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

随机推荐

  1. 高性能的HTTP代理 LittleProxy

    引用: https://github.com/adamfisk/LittleProxy 拦截和操纵HTTPS流量,LittleProxy使用中间人(MITM)管理器. LittleProxy的默认实现 ...

  2. HTML5资源站

    前端里:http://www.yyyweb.com/ http://www.cnblogs.com/html5tricks/p/3925844.html

  3. pip使用国内镜像源

    windows版 1.在windows文件管理器中,输入 %APPDATA% 2.在该目录下新建pip文件夹,然后到pip文件夹里面去新建个pip.ini文件 3.在新建的pip.ini文件中输入以下 ...

  4. 平衡树以及AVL树

    平衡树是计算机科学中的一类数据结构. 平衡树是计算机科学中的一类改进的二叉查找树.一般的二叉查找树的查询复杂度是跟目标结点到树根的距离(即深度)有关,因此当结点的深度普遍较大时,查询的均摊复杂度会上升 ...

  5. jmeter 安装tps插件

    1.下载  jpgc-graphs-basic-2.0.zip 2.解压并将lib 目录下的 jmeter-plugins-cmn-jmeter-0.4.jar 拷贝到 %JMeter%/lib 目录 ...

  6. BZOJ 1925 地精部落(DP)

    一道很经典的DP题. 题意:求n排列中波动排列的种数. 不妨考虑DP,令dp1[i][j],表示1-j的排列中,第一项为i之后递增的波动排列种数.dp2[i][j]表示1-j的排列中,第一项为i之后递 ...

  7. QVariant实质

    QVariant实质 QVariant是一种可以存储不同类型的数据结构,在很多场合这是很有用得为了达到这种目的,可以想象,该对象应该存储对象的类型信息,数据信息以及其他辅助详细考虑用途,这种对象必须支 ...

  8. 【刷题】BZOJ 4025 二分图

    Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考考你. Input ...

  9. linux 操作swap分区

    Swap是Linux下的交换分区,类似Windows的虚拟内存,当物理内存不足时,系统可把一些内存中不常用到的程序放入Swap,解决物理内存不足的情况. 若系统安装时开辟的Swap空间太小,可通过手动 ...

  10. 安装svn测试环境

    centos 6.5 web service模式 安装svn测试服务器 1 下载subversion shell>yum install subversion 2 查看安装的版本 [root@c ...