用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. javascript之彻底理解prototype

    prototype很简单, 就是提供一种引用的机制. let BaseObject = { toString(){ return this.str; }, }; let Object1 = {str: ...

  2. vue shorthands

    vue shorthands : & @ https://vuejs.org/v2/guide/syntax.html#Shorthands v-for https://vuejs.org/v ...

  3. Spring Autowired原理

    今天来整理一下Spring的自动装配 autowire一节,在这里我们要解决以下问题: 什么是自动装配? 自动装配的意义? 自动装配有几种类型? 如何启用自动装配? 自动装配将引发的问题? 一.什么是 ...

  4. 51nod 1804 小C的多边形(构造)

    首先可以算出无解的充分不必要条件,所有边的和为sum=3*((n-1)*n)/2,如果sum%n!=0显然无解. 也就是说n为奇数必然无解.现在考虑n为偶数的情况. 不妨假设n为偶数有解,现在考虑如何 ...

  5. 「美团 CodeM 资格赛」跳格子

    题目描述 nnn 个格子排成一列,一开始,你在第一个格子,目标为跳到第 n 个格子.在每个格子 i 里面你可以做出两个选择: 选择「a」:向前跳 ai​​ 步. 选择「b」:向前跳 bi 步. 把每步 ...

  6. Remember the Word UVALive - 3942(dp+trie)

    题意: 给S个不同的单词和一个长字符串 问将其分解为若干个单词有多少种方法(单词可重复使用) 解析: dp[i]表示在这个字符串中以某个位置i为起点的 的一段子字符串 则这个子字符串若存在某个前缀恰好 ...

  7. HDU 4383 To The Moon 解题报告

    HDU 4383 To The Moon 题意翻译 已知一个长为\(n\)的序列\(a\),你需要进行下面的四种操作. C l r d 将区间\([l,r]\)中的数加上\(d\),同时时间加\(1\ ...

  8. elk +redis 环境搭建

    这个是最新的elk+redis搭建日志分析平台,今年时间是2015年9月11日. Elk分别为 elasticsearch,logstash, kibana 官网为:https://www.elast ...

  9. ss命令用法小记

    By francis_hao    Nov 4,2017   ss是一个查看socket的实用工具 概要 ss [options] [ FILTER ]   描述 ss可以查看socket的统计信息, ...

  10. LuaJavaBridge - lua与java互操作的简单解决方案

    引入:Android平台代码和Lua代码的交互均通过C++和Java交互,Lua再和C++交互(lua  <==> C++ <==> java) 我最开始遇见这种lua调用ja ...