监测DOM元素尺寸大小变化,动态计算元素位置信息——vue

目录

一、情况描述: 

 二、上代码:

三、分析:

四、问题 :

五、优化:


一、情况描述: 

其实在网页的布局中我们时常会使用到以下这样的排版方式

(文本一 => 图片一 => 文本二 => 图片二 ...)

 这样就会浮现一个问题,如果网页大小一直是不变,也就是说不改变当前网页宽高的情况下,这样的布局是没有问题的,可是,一旦对网页进行缩放的话,因为当前 文本 和 图片的距离是固定的,所以就会出现错位和相距过大或过小的情况

那么在这种情况下,我们就应该去动态的去计算当前两个文本之间的距离,然后根据计算好的距离去将图片放置在一个合适的位置。


 二、上代码:

const translatep = ref("110px");
const arr_text = reactive(['我是第一', '我是第二', '我是第三', '我是第四']);

let end = 0;
let start = 0;

const translateData = (divF: any) => {
  divF.forEach((item: any, index: number) => {
    if (index === 0 || index === 1) {
      if (index === 1) end = item.getBoundingClientRect().x
      if (index === 0) start = item.getBoundingClientRect().x
    }
  })
  translatep.value = (end - start - 50) / 2 + 50 - 12.8 + 'px'
  console.log((end - start - 50) / 2 + 50 - 12.8 + 'px')
}

onMounted(() => {
  let divF = document.querySelectorAll(".span-flex .trend-point-wrap-item");
  translateData(divF)
  let deRest = debounce(() => translateData(divF))
  window.addEventListener("resize", () => { 
  translateData(divF)
  })
})

三、分析:

  1. item.getBoundingClientRect().x 返回元素的大小及其相对于视口的位置。

  2. (end - start - 50)  / 2 + 50 - 12.8 + 'px'  

    end:文本二视口左上角x坐标

    start:文本一视口左上角x坐标

    50:文本的宽度(一般都是一样的)

    /2:两个文本中间的位置

    12.8:文本宽度的一半(我这里文本宽为25.6px)


四、问题 :

虽然上述代码确实可以做到动态计算这个功能,但是就目前而言,还是有两点问题:

  1. 如果频繁的去改变网页的宽度,那么就会一直进行计算,浪费资源
  2. 因为使用的是 window.addEventListener("resize",() => {}),在监听窗口变化时,固然起到很好的效果,但是对于网页性能消耗过大。因为html中每个标签的变化,都会触发当前监听事件。

五、优化:

问题一:可以使用防抖函数去处理解决。

//防抖
const debounce = <T>(fn: (...args: any[]) => T, delay = 500) => {
  let timer: number | null = null;
  let result: T | null = null;
  return (...args: any[]) => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
    timer = window.setTimeout(() => {
      result = fn(...args);
    }, delay);
    return result;
  };
}

let deRest = debounce(() => translateData(divF))

deRest()

问题二:需要使用到 ResizeObserver (对指定element和svgelement元素进行监听)

  let element: any = document.querySelector('.span-flex')
  var ro = new ResizeObserver(entries => {
    for (let _entry of entries) {
      deRest()
    }
  });
  // 观察一个或多个元素
  ro.observe(element);
})
### 关于 div 和 canvas 的事件处理差异 #### 1. **为何 `div` 可以响应鼠标点击事件** HTML 中的 `<div>` 是一种标准的 DOM 元素,它天然支持各种事件绑定机制,比如 `onclick`, `onmouseover`, 或者 Vue.js 提供的指令形式(如 `@click`)。这是因为浏览器默认为这些元素实现了完整的交互模型[^1]。 ```html <div ref="container" class="canvas-container"> </div> ``` 上述代码片段展示了通过 Vue.js 绑定事件的方式。当用户触发特定行为时(例如点击),Vue 将自动调用对应的回调函数来执行逻辑操作。 --- #### 2. **为何 Canvas 默认无法像 Div 一样直接响应复杂事件** Canvas 是一个绘图区域,其本身并不具备内置的子对象概念。所有的图形都是绘制在其二维上下文中,并不会被当作独立的对象存储起来。这意味着即使你在画布上绘制了一些矩形或其他形状,它们并不会成为可单独识别的目标[^2]。 如果希望实现类似于 HTML 元素的行为,则需要手动管理坐标范围并检测用户的输入动作是否落在某个预定义区域内: - 使用鼠标的 X/Y 坐标判断当前光标所在位置; - 对比该位置与已知图形的位置关系决定下一步行动。 以下是基于 JavaScript 实现的一个简单例子用于说明这一过程: ```javascript function handleCanvasClick(event){ const rect = event.target.getBoundingClientRect(); let scaleX = canvas.width / rect.width; let scaleY = canvas.height / rect.height; // 获取实际像素位置 let x = (event.clientX - rect.left)*scaleX; let y = (event.clientY - rect.top)*scaleY; console.log(`Clicked at (${x}, ${y})`); } ``` 此方法允许开发者捕获到精确的点击地点以便进一步分析或反应。 --- #### 3. **解决 Canvas 图形移动过程中遗留痕迹的问题** 正如所提到,在不断更新显示状态的同时如果没有清理之前的画面就会造成重叠现象。这通常是因为缺少必要的清屏步骤所致。 可以通过设置透明度或者直接擦除整个屏幕两种方式之一来进行修正: - 方法一:调整颜色属性使得新层覆盖旧层效果不明显;但这可能影响视觉质量。 - 更推荐的方法二则是先完全清除再重新渲染全部内容: ```javascript cxt.clearRect(0, 0, cnv.width, cnv.height); // 接着继续正常流程... drawRect(); ``` 这样能够有效避免残留影像的情况发生。 --- #### 4. **增强用户体验——增加高亮功能** 为了提高界面友好程度,可以在侦测到悬停状态下改变目标外观特性作为反馈提示给使用者知道他们正接近哪个项目之上[^3]。 下面给出一段伪代码示范怎样达成这样的目的: ```javascript function highlightShape(x,y){ shapes.forEach(shape => { if(isPointInPath(shape,x,y)){ shape.strokeColor='red'; // 改变轮廓线色彩表示选中态 } }); } function unHighlightAll(){ shapes.forEach(shape=>{ shape.strokeColor=defaultStrokeColor; }); } ``` 每当监测到进入/离开某物体边界的时候就分别调用上面两个辅助程序完成即时修改视效的任务。 --- ### 总结 综上所述,虽然 Canvas 不同于常规标签控件那样易于操控,但是借助恰当的技术手段完全可以克服这些问题从而构建出更加互动性强的应用场景出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值