antv破解版（antv x6 神奇的图片边框）

昨天才把html节点中的图片转成base格式的
  
  
  
  
  
  ，今天就发现一个用户体验的问题；那么是啥呢？就是我从左侧的树形菜单中拖拽节点的时候（鼠标按下也是同样问题） 
  
  
  
  
  
，发现节点的图片区域那里会出现一个边框 


 


 


 


 


 

，持续时间不是很长
 
 
 
 
 
 ，就几毫秒的时间  
   
   
   
   
   
，但是当你连续拖拽几个不同节点的时候就会发现这个边框竟然又消失不见了 

 

 

 

 

 
，如果此时重新进入页面

 

 

 

 

 

 ，再开始拖动节点           ，图片的边框又出现了           。

问题排查

是否是官方节点自带的边框？如果是 
 

 
 

 
 

 
 

 
 

 
 
，配置项是什么？ 图片的默认边框是否被清除？还是外围元素的边框导致？ 图片的加载时机？ 是否是转base64的问题











，毕竟在这之前没有这个情况发生……

带着这些问题                 ，第一时间去翻阅了官方文档 
 
 
 
 
 
 
 
 
 
 
 
，发现没有和这个问题相关的配置项
















，即使有设置了也不管用；然后就把问题抛到了交流群里面            ，发现压根没人回答…… 
 
  
 
  
 
  
 
  
 
  
 
，那就只能开始第二个方案了：把图片的默认边框都去除掉










，比如border
  
  
  
  
  
  ，box-shadow 
  
  
  
  
  
，outline这些属性都去除掉了 


 


 


 


 


 

，发现还是没用；好吧
 
 
 
 
 
 ，开始第三套方案：使用new Image处理图片的加载时机问题  
   
   
   
   
   
，嗯！不出意外的话 

 

 

 

 

 
，这个方法还是不行

定位问题

经过上面四个方案的尝试后

 

 

 

 

 

 ，我大概知道了问题的源头在哪边了           ，那就是我自定义html节点中图片地址赋值的地方 
 

 
 

 
 

 
 

 
 

 
 
，由于DataUri.imageToDataUri 这个方法是个异步执行的











，所以才会导致在渲染的时候会出现短暂的视觉差

解决问题

先给图片赋值个普通的地址（非base64的地址） 在DataUri.imageToDataUri的回调中再把图片的src替换成base64的 const container_img = document.createElement(img); container_img.setAttribute(class, cu-container-img); container_img.setAttribute(alt, 节点ico); container_img.style.cursor = pointer; // 先用远程图片地址给图片的src赋值                 ，然后再重新赋值成base64的格式；这么做的目的就是解决节点拖拽到画布上会出现短暂的边框闪动问题 
 
 
 
 
 
 
 
 
 
 
 
，如果你要复现这个边框
















，可以把下面这一行代码注掉（不是必现） container_img.src = img; // 把图片转成base64方便存储到后端 DataUri.imageToDataUri(img, function (nu, url) { // 第一个参数无效            ，用的只是第二个参数 
 
  
 
  
 
  
 
  
 
  
 
，但是第一个参数不写由不行 container_img.src = url; });