首页 > 其他分享 >SolidJS-每日小知识(9/12)

SolidJS-每日小知识(9/12)

时间:2024-09-12 12:35:21浏览次数:12  
标签:12 const svgElement 知识 boxLocation SolidJS 坐标 addEventListener event

知识介绍

  1. 对SVG元素实现拖拽视图的功能

代码分析

  1. 对于SVG元素的viewBox属性(x, y, w, h),我们设置x,y作为信号量
const [boxLocation, setboxLocation] = createSignal({ x: 0, y: 0 }); 
  1. 添加拖拽所需的变量和事件
  let isDragging = false;
  let startX: number;
  let startY: number;

  // 鼠标按下事件处理
  const handleMouseDown = (event) => {
    isDragging = true;
    startX = event.clientX + boxLocation().x;
    startY = event.clientY + boxLocation().y;
    event.currentTarget.style.cursor = 'grabbing';
  };

  // 鼠标拖动事件处理
  const handleMouseMoveDrag = (event) => {
    if (isDragging) {
      setboxLocation({
        x: -event.clientX + startX,
        y: -event.clientY + startY
      });
    }
  };

  // 鼠标松开事件处理
  const handleMouseUp = (event) => {
    isDragging = false;
    event.currentTarget.style.cursor = 'grab';
  };

这里有一个关键逻辑:
设鼠标按下时当前光标坐标为start,拖动时当前光标坐标为end。
则handleMouseDown时startX = start.x+boxLocation().x;startY = start.y+boxLocation().y。
在handleMouseMoveDrag时,实时设置boxLocation.x为-end.x+startX,boxLocation.y为-end.y+startY,即
实时设置boxLocation.x = -end.x + start.x+boxLocation().x = (拖拽后位置的x坐标 - 初始位置的x坐标) + boxLocation()的x坐标;
实时设置boxLocation.y = -end.y + start.y+boxLocation().y = (拖拽后位置的y坐标 - 初始位置的y坐标) + boxLocation()的y坐标;

当前拖拽方向和SVG内元素移动方向相同
3. 组件挂载

  // 组件挂载和卸载时的事件处理
  createEffect(() => {
    const svgElement = document.querySelector('.match-svg');
    svgElement.addEventListener('mousedown', handleMouseDown);
    svgElement.addEventListener('mousemove', handleMouseMoveDrag);
    svgElement.addEventListener('mouseup', handleMouseUp);

    onCleanup(() => {
      svgElement.addEventListener('mousedown', handleMouseDown);
      svgElement.addEventListener('mousemove', handleMouseMoveDrag);
      svgElement.addEventListener('mouseup', handleMouseUp);
    });
  });

标签:12,const,svgElement,知识,boxLocation,SolidJS,坐标,addEventListener,event
From: https://www.cnblogs.com/Frey-Li/p/18409948

相关文章

  • 洛谷题单指南-分治与倍增-P1226 【模板】快速幂
    原题链接:https://www.luogu.com.cn/problem/P1226题意解读:快速幂模版题。解题思路:1、分治法要计算a^b,可以对b分情况讨论:如果b是偶数,即b=2t,a^b=a^t*a^t如果b是奇数,即b=2t+1,a^b=a*a^t*a^t很容易用递归实现100分代码:#include<bits/stdc++.h>usingnamespa......
  • 多维度智能体验:引领未来的RAG型知识图谱数字人
    随着人工智能技术的发展,传统的数字人已逐渐普及,但大多数仍然局限于简单的文本回复或预设答案,缺乏深入的语义理解和个性化互动能力,难以应对复杂、多维度的问题交互。不同于传统的数字人,英智知识图谱RAG型数字人提供的不仅是文本回复,而是能够通过知识图谱生成更为精准、上下文相关......
  • AI助理驱动的企业知识库:从数据海洋到知识金矿的转变
    在当今这个信息爆炸的时代,企业面临着前所未有的数据洪流。这些数据,无论是来自市场趋势、客户反馈、内部运营还是外部研究,都蕴含着巨大的价值,但同时也带来了筛选、整合与应用的巨大挑战。如何在这片数据海洋中捞出真金白银,成为企业提升竞争力、实现可持续发展的关键。AI助理......
  • 多维度智能体验:引领未来的RAG型知识图谱数字人
    随着人工智能技术的发展,传统的数字人已逐渐普及,但大多数仍然局限于简单的文本回复或预设答案,缺乏深入的语义理解和个性化互动能力,难以应对复杂、多维度的问题交互。不同于传统的数字人,英智知识图谱RAG型数字人提供的不仅是文本回复,而是能够通过知识图谱生成更为精准、上下文相关的......
  • 大模型校招面试通关秘籍:必备知识点大盘点,高效备战面试策略全解析
    一、必备的知识点在参加大模型相关的校招面试时,以下是一些必备的知识点,这些知识点可以帮助应聘者更好地准备面试,并在面试中展示自己的专业能力:1.基础概念理解了解什么是大模型,以及它们在自然语言处理、计算机视觉等领域的应用。熟悉深度学习的基本原理,包括神经网络、激......
  • 24.9.12——小学期开发实记
    今天做了什么:  今天复刻了团队成员之前实现的”选择“功能。继续将已画好的界面添加上这个功能。遇到什么问题:  一开始添加数据信息后,一直报错:index.vue:224:48Uncaught(inpromise)TypeError:Cannotreadpropertiesofundefined(reading'then')atindex.vue:......
  • 知识库文档系统​V1.0.4
    可用于企业工作流程的文档管理,结构化记录沉淀高价值信息,形成完整的知识体系,能够轻松提升知识的流转和传播效率,更好地成就组织和个人。为部门、团队或项目搭建知识库,所有成员在同一平台创作和管理知识,轻松凝聚团队智慧,有效降低企业的知识流转成本,让信息在企业内自由流动。V1.0.4完善......
  • convnext_xxlarge.clip_laion2b_soup_ft_in12k timm模型库
    Modelcardforconvnext_xxlarge.clip_laion2b_soup_ft_in12kAConvNeXtimageclassificationmodel.CLIPimagetowerweightspretrainedin OpenCLIP onLAIONandfine-tunedonImageNet-12kbyRossWightman.PleaseseerelatedOpenCLIPmodelcardsformored......
  • 滚雪球学MyBatis(12):常见问题与解决方案
    前言欢迎回到我们的MyBatis系列教程。在前几期中,我们已经进行了MyBatis的基础使用、进阶功能及项目实战的详细讲解。通过这些内容,相信大家对MyBatis有了全面的了解,并能够在实际项目中应用MyBatis。然而,在使用MyBatis的过程中,我们可能会遇到各种问题。本期内容中,我们将总结......
  • linux操作系统日志小知识
    Linux系统中的日志文件是系统、应用程序和各种服务运行状态的重要记录。它们对于系统管理员来说至关重要,因为它们可以帮助诊断问题、监控系统性能和安全问题。以下是Linux日志文件的一些基本概念和介绍:1.**日志文件的位置**:  -`/var/log`:这是大多数Linux发行版存储......