首页 > 其他分享 >antv x6 神奇的图片边框

antv x6 神奇的图片边框

时间:2023-04-27 16:47:20浏览次数:48  
标签:base64 container img 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;
    });

标签:base64,container,img,antv,边框,x6,节点,图片
From: https://www.cnblogs.com/sxdpanda/p/17359331.html

相关文章

  • 在线直播源码,自定义AlertDialog设置宽高并去掉默认的边框
    在线直播源码,自定义AlertDialog设置宽高并去掉默认的边框1、先写一个自定义的AlertDialog。 packagecom.phone.common_library.dialog; importandroid.annotation.SuppressLint;importandroid.content.Context;importandroid.content.DialogInterface;importandroid.vie......
  • Qt+MySql开发笔记:Qt5.9.3的msvc2017x64版本编译MySql8.0.16版本驱动并Demo连接数据库
    前言  mysql驱动版本msvc2015x32版本调好,mysql的mingw32版本的驱动上一个版本编译并测试好,有些三方库最低支持vs2017,所以只能使用msvc2017x64,基于Qt5.9.3,于是本篇编译mysql驱动的msvc2017x64版本,满足当前的特定需求,这次过程有点费劲,可能是Qt的版本低于Qt5.12,继续无保留分享......
  • pwn | jarvisoj_level3_x64
    pwn|jarvisoj_level3_x64x64ret2libcexp:frompwnimport*fromLibcSearcherimport*context.log_level='debug'p_vuln=0x00000000004005E6p_main=0x000000000040061Ap_str=0x00000000004006DC#p=process('./level3_x64')p=......
  • 【逆向】使用x64dbg实现qq私聊与群消息防撤回
    微信防撤回的实现比qq还要简单一些,因为它的私聊和群聊的撤回用的是一个call。。。微信本体是32位,所以我们直接用x32dbg去附加微信的撤回函数我们不知道在哪,所以先扫一下所有模块。然后搜索revoke用小号先给我们的微信发个消息,然后加断点,小号再撤回,从而定位撤回函数位置。......
  • x64逆向——MT、MT在release和debug下的四种模式寻找main入口
    vs代码生成四种模式:MT选项:链接LIB版的C和C++运行库。在链接时就会在将C和C++运行时库(LIBCMT.LIB、LIBC.LIB)集成到程序中,程序体积会变大。MTd选项:LIB的调试版。MD选项:使用DLL版的C和C++运行库,这样在程序运行时会动态的加载对应的DLL,程序体积会减小,缺点是在系统没有对应DLL时程序无......
  • 加密与解密x64逆向——寄存器和函数调用
    64位软件逆向技术寄存器本节讨论的x64是AMD和INTEL64的合成,是指与现有x86兼容的64位CPU。在64位系统中,内存地址为64位。x64系统通用寄存器的名称,第一个字母从E改为R“RAX”,大小扩展到64位,数量增加8个,扩充了8个128位XMM寄存器。函数1.栈平衡RSP用来保存当前的栈顶指针,每8个......
  • 加密与解密x64逆向——变量、if和switch、循环语句
    数据结构主要是对局部变量,全局变量,数组等的识别。1.局部变量局部变量是函数内定义的变量,存放的内存区域称之为栈区。生命周期就是从函数进入到返回释放。函数在入口处申请了预留栈空间和局部变量空间,也就是subrsp,30h。局部变量空间在高地址。在应用程序被编译成release版本......
  • 加密与解密x64逆向——虚函数
    4.整数的取模取模运算可以通过除法指令实现。一般的优化做法是将其转换成等价的位运算或者除法运算,再由除法运算进行优化。虚函数C++的三大核心机制是封装,继承,多态,而虚函数就是多态的一种体现。软件逆向中,难免遇到使用面向对象思想设计的软件,而虚函数就是在实际软件逆向过程中......
  • HTML5: 利用SVG动画动态绘制文字轮廓边框线条
    DEMO:点击这里看效果 简要教程这是一款很酷的html5svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIALICONS。制作流程先......
  • 【逆向】x64程序逆向基础——调用约定和栈使用
    【逆向】x64程序逆向基础 主要区别1.所有地址指针都是64位。2.增加和扩展新的寄存器,并兼容原32位版本的通用寄存器。3.原指令指针寄存器EIP扩展为RIP。寄存器1.64位寄存器兼容原32位寄存器。2.新增加8个XMM寄存器(XMM8-XMM15)。3.扩展原32位寄存器的64位版本,并......