G6踩坑日记
2024-09-01 15:49:32
用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文档
先加班,有时间补充
最新文章
- DOM、BOM 操作超级集合
- 理解Cookie和Session机制(转)
- composer--------------通过composer.json下载laravel包----barryvdh/laravel-debugbar
- JS简介
- 9 patch png 的上下左右
- javascript事件处理解析
- 错题集锦(二) -- Java专项
- 【MySQL】性能优化 之 延迟关联
- org.codehaus.jackson.map.JsonMappingException: No serializer found for class org.hibernate.proxy.pojo.javassist.
- JQuery AJAX请求aspx后台方法
- jQuery常用特效插件汇总
- 请求(Request)的参数(Parameter)里包含特殊字符(#等)的正确处理方式
- meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413
- iOS应用的几个阶段
- HTTP学习
- 富文本编辑器CKEditor的使用
- 再见了Server对象,拥抱IHostingEnvironment服务对象(.net core)
- Python MD5算法使用
- 配置Apache虚拟主机
- react 首页加载loading
热门文章
- 在linux下编译线程程序undefined reference to `pthread_create&#39;
- asp.net mvc4+EF 下使用UEditor
- 【bzoj5130】[Lydsy12月赛]字符串的周期 DFS+KMP
- (转)slf4j+logback将日志输出到控制台
- Proving Equivalences UVALive - 4287(强连通分量 水题)
- [HNOI/AHOI2018]排列 贪心
- 【CF55D】Beautiful numbers(动态规划)
- 「CodePlus 2017 11 月赛」可做题
- The 14th Zhejiang Provincial Collegiate Programming Contest Sponsored by TuSimple - C 暴力 STL
- OD常见指令和快捷键