G6踩坑日记
用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踩坑日记的更多相关文章
- AI相关 TensorFlow -卷积神经网络 踩坑日记之一
上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...
- 人工智能(AI)库TensorFlow 踩坑日记之一
上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...
- hexo博客谷歌百度收录踩坑日记
title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- JavaScript 新手的踩坑日记
引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- 人工智能(AI)库TensorFlow 踩坑日记之二
上次 踩坑日志之一 遗留的问题终于解决了,所以作者(也就是我)终于有脸出来写第二篇了. 首先还是贴上 卷积算法的示例代码地址 :https://github.com/tensorflow/models ...
- 微信小程序开发踩坑日记
2017.12.29 踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录 微信小程序设置元素满屏,横向直接w ...
随机推荐
- javascript之彻底理解prototype
prototype很简单, 就是提供一种引用的机制. let BaseObject = { toString(){ return this.str; }, }; let Object1 = {str: ...
- vue shorthands
vue shorthands : & @ https://vuejs.org/v2/guide/syntax.html#Shorthands v-for https://vuejs.org/v ...
- Spring Autowired原理
今天来整理一下Spring的自动装配 autowire一节,在这里我们要解决以下问题: 什么是自动装配? 自动装配的意义? 自动装配有几种类型? 如何启用自动装配? 自动装配将引发的问题? 一.什么是 ...
- 51nod 1804 小C的多边形(构造)
首先可以算出无解的充分不必要条件,所有边的和为sum=3*((n-1)*n)/2,如果sum%n!=0显然无解. 也就是说n为奇数必然无解.现在考虑n为偶数的情况. 不妨假设n为偶数有解,现在考虑如何 ...
- 「美团 CodeM 资格赛」跳格子
题目描述 nnn 个格子排成一列,一开始,你在第一个格子,目标为跳到第 n 个格子.在每个格子 i 里面你可以做出两个选择: 选择「a」:向前跳 ai 步. 选择「b」:向前跳 bi 步. 把每步 ...
- Remember the Word UVALive - 3942(dp+trie)
题意: 给S个不同的单词和一个长字符串 问将其分解为若干个单词有多少种方法(单词可重复使用) 解析: dp[i]表示在这个字符串中以某个位置i为起点的 的一段子字符串 则这个子字符串若存在某个前缀恰好 ...
- HDU 4383 To The Moon 解题报告
HDU 4383 To The Moon 题意翻译 已知一个长为\(n\)的序列\(a\),你需要进行下面的四种操作. C l r d 将区间\([l,r]\)中的数加上\(d\),同时时间加\(1\ ...
- elk +redis 环境搭建
这个是最新的elk+redis搭建日志分析平台,今年时间是2015年9月11日. Elk分别为 elasticsearch,logstash, kibana 官网为:https://www.elast ...
- ss命令用法小记
By francis_hao Nov 4,2017 ss是一个查看socket的实用工具 概要 ss [options] [ FILTER ] 描述 ss可以查看socket的统计信息, ...
- LuaJavaBridge - lua与java互操作的简单解决方案
引入:Android平台代码和Lua代码的交互均通过C++和Java交互,Lua再和C++交互(lua <==> C++ <==> java) 我最开始遇见这种lua调用ja ...