antv x6 神奇的图片边框

科技资讯 投稿 5500 0 评论

antv x6 神奇的图片边框

问题排查

    是否是官方节点自带的边框?如果是,配置项是什么?
  • 图片的默认边框是否被清除?还是外围元素的边框导致?
  • 图片的加载时机?
  • 是否是转base64的问题,毕竟在这之前没有这个情况发生……

带着这些问题,第一时间去翻阅了官方文档,发现没有和这个问题相关的配置项,即使有设置了也不管用;然后就把问题抛到了交流群里面,发现压根没人回答……,那就只能开始第二个方案了:把图片的默认边框都去除掉,比如border,box-shadow,outline这些属性都去除掉了,发现还是没用;好吧,开始第三套方案:使用new Image处理图片的加载时机问题,嗯!不出意外的话,这个方法还是不行

定位问题

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;
    };

编程笔记 » antv x6 神奇的图片边框

赞同 (31) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽