用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. ZOJ 2060 A-Fibonacci Again

    https://vjudge.net/contest/67836#problem/A There are another kind of Fibonacci numbers: F(0) = 7, F( ...

  2. MySQL专题 2 数据库优化 Slow Query log

    MySQL Server 有四种类型的日志——Error Log.General Query Log.Binary Log 和 Slow Query Log. 第一个是错误日志,记录 mysqld 的 ...

  3. [OS] 系统调用

  4. css 层加透明度后文字依然清晰

    background: rgba(, , , !important; /*实现FF背景透明,文字不透明*/ filter: Alpha(opacity=); background: #0a0a0a; ...

  5. QT样式表

    QT样式表 一.QT样式表简介 1.QT样式表简介 QSS的主要功能是使界面的表现与界面的元素分离,使得设计皮肤与界面控件分离的软件成为可能. QT样式表是允许用户定制widgets组件外观的强大机制 ...

  6. 洛谷 P1278 单词游戏 【状压dp】

    题目描述 Io和Ao在玩一个单词游戏. 他们轮流说出一个仅包含元音字母的单词,并且后一个单词的第一个字母必须与前一个单词的最后一个字母一致. 游戏可以从任何一个单词开始. 任何单词禁止说两遍,游戏中只 ...

  7. 2017-2018-2 20165218 实验四《Android开发基础》实验报告

    实验三 Android开发基础 课程:java程序设计 姓名:赵冰雨 学号:20165218 指导教师:娄嘉鹏 实验日期:2018.4.14 实验内容: 1.基于Android Studio开发简单的 ...

  8. hadoop(二)hadoop集群的搭建

    一.集群环境准备工作 1.修改主机名 在root 账户下 vi /etc/sysconfig/network   或者 sudo vi /etc/sysconfig/network 2.设置系统默认启 ...

  9. 最近公共祖先(LCA)(题目)

    Time Limit: 2000 ms Memory Limit: 256 MB Description Input Output Sample Input 15 5 1 2 3 4 5 6 7 8 ...

  10. Codeforces 939.E Maximize!

    E. Maximize! time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...