Tmagic-editor低代码底层拖拽库Moveable示例学习

news2024/9/20 22:24:30

在前面咱们的自研低代码海报制作平台学习分享计划中分享了自己开发的基本拖拽组件,也只是做了最简单的基本实现。真要写产品,更多还是依赖相关的开源优秀库。

文章目录

    • 参考
    • 基本拖拽
    • 基本缩放
    • 基本Scalable
    • 基本旋转
    • 基于原点的拖拽和旋转
    • 关于练习源码

参考

参考转发博文:低码编辑器中的“拖拽”是如何实现的

参考腾讯出品的Tmagic-editor
在这里插入图片描述
这款优秀的低代码拖拽编辑器底层用到了开源拖拽库Moveable。

大家学习可以参考:Moveable官方参考示例,以下是笔者展示的相关的示例练习截图:

基本拖拽

在这里插入图片描述

基本缩放

默认不限制,也可以设置在min-widthmin-heightmax-widthmax-height范围内进行缩放
在这里插入图片描述

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

在之前搭建好的vite脚手架工程中以vitepress示例的形式进行练习,后续会将上述的拖拽练习,封装成组件以实现在自研低代码海报平台中复用。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2049042.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

谐振功率放大器的基本原理

1LC谐振电路 谐振又称“共振”。振荡系统在周期性外力作用下,当外力作用频率与系统固有振荡频率相同或很接近时,振幅急剧增大的现象。产生谐振时的频率称“谐振频率”。 电工技术中,振荡电路的共振现象: 1)电感与电…

刀客doc:这一届奥运营销,伊利和蒙牛谁更滑头?

文 | 刀客Doc 伊利和蒙牛谁赢了? 聊一聊奥运营销,交个朋友加V:efangfeng 今年巴黎奥运营销,我看大家讨论比较多的就是蒙牛和伊利的暗战。 其中有一种声音认为,伊利这次又再一次成功伏击蒙牛。这个观点确实满足了不少…

SAR靶机笔记

SAR 靶机笔记 概述 SAR 是 Vulnhub 上的靶机,大家可以去 vulnhub 网站上去进行下载。 这里有链接: https://download.vulnhub.com/sar/sar.zip 一丶常规的 nmap 扫描 1)主机发现 sn 只做 ping 扫描,不做端口扫描 nmap -sn …

回顾加密风险投资15年演变:步履维艰,但总体向上

1. 引言:加密风险投资的历程 过去15年,加密领域经历了从默默无闻到引爆全球金融市场的巨大变迁。风投机构(VC)在这一过程中扮演了重要角色,推动了区块链和加密货币行业的快速发展。本文将探讨加密风险投资的动态演变&…

转录组8种免疫浸润分析方法整理

探索疾病的免疫微环境是当下研究的热点,因此这也要求我们对免疫浸润分析的各种工具要有所了解,这些工具包括: CIBERSORT,quanTIseq,EPIC (这三种方法可得到不同细胞亚群的百分比结果/绝对丰度), xCell,TIMER&#xff0…

接口基础知识10:详解接口文档

课程大纲 一、接口文档简介 描述系统接口信息的文档,通常由‌后端开发人员编写,用于规定接口的规范,详细说明接口的逻辑和作用、如何调用接口。 接口文档包含的内容: 接口的逻辑和作用:简要描述接口的功能和用途。 …

JavaFX对话框控件-Dialog

JavaFX对话框控件-Dialog 常用属性titleinitOwnerdialogPaneresultConverter 实现方式 与Alert大部分功能类似可以自定义弹出框内容,比较灵活与DialogPane布局配合使用,自定义具体内容 参考DialogPane 常用属性 title 弹出框标题,标题太长…

2024 年了,IT 运维监控系统都有哪些推荐?

大浪淘沙,2024 年的今天,市面上很多监控系统慢慢淡出了大家的视野,而一些新的监控系统也逐渐崭露头角。今天我们就来看看 2024 年的当下,哪些 IT 运维监控系统最值得关注。 Prometheus 毫无疑问,Prometheus 是最值得关…

MySQL InnoDB supremum pseudo-record范围说明

引言 在 MySQL InnoDB 存储引擎中,锁机制是保证数据一致性和事务隔离的重要手段之一。InnoDB 引入了多种锁机制,其中 next-key lock 是实现行锁和间隙锁的关键部分。在 next-key lock 的机制中,supremum pseudo-record 是一个特殊的存在&…

排序算法【归并排序】

一、归并排序算法的原理 如下面数组所示进行归并排序。 对左半部分进行排序操作。 对左半部分进行归并操作。 二、归并排序 #include <stdio.h> #include "test.h"/* 归并排序法* arr:数组的首地址指针* begin:需要排序数组的起始序号* len:数组的长度*/ void…

微信小程序保存图片到相册

申请权限 代码如下 wx.downloadFile({url: image, //仅为示例&#xff0c;并非真实的资源success(res) {// 只要服务器有响应数据&#xff0c;就会把响应内容写入文件并进入 success 回调&#xff0c;业务需要自行判断是否下载到了想要的内容if (res.statusCode 200) {consol…

SpringBoot-04--整合登录注册动态验证码

文章目录 效果展示1.导入maven坐标2.编写代码生成一个验证码图片3.前端如何拿到验证码4. 后端生成验证码5前端代码 效果展示 效果&#xff0c;每次进入页面展现出来不同的验证码。 技术 使用别人已经写好的验证码生成器&#xff0c;生成图片&#xff0c;转为Base64编码&#x…

IndexError: list index out of range | 列表索引超出范围完美解决方法

IndexError: list index out of range &#x1f4c9; | 列表索引超出范围完美解决方法 IndexError: list index out of range &#x1f4c9; | 列表索引超出范围完美解决方法摘要 &#x1f4c4;引言 &#x1f680; 什么是 IndexError: list index out of range&#xff1f;&…

论文翻译:Jailbroken: How Does LLM Safety Training Fail?

越狱&#xff1a;LLM安全训练为何失败&#xff1f; 文章目录 越狱&#xff1a;LLM安全训练为何失败&#xff1f;摘要1 引言1.1 相关工作 2 背景&#xff1a;安全训练的语言模型和越狱攻击2.1 对受限行为的越狱攻击2.2 评估安全训练的语言模型 3 失败模式&#xff1a;目标冲突和…

自然语言处理工程师的薪资待遇高吗?工作职责是什么呢?

自然语言处理&#xff0c;通常称为NLP&#xff0c;是计算机科学、人工智能和语言学的交叉领域&#xff0c;侧重于使计算机理解、解释并生成人类语言。在分析海量文本数据和开发可处理文本数据系统方面&#xff0c;NLP工程师发挥着至关重要的作用&#xff0c;这些数据可用于搜索…

Fast API + LangServe快速搭建 LLM 后台

如果快速搭建一个 LLM 后台 API&#xff0c;使前端可以快速接入 LLM API。LangChain 或者 LlamaIndex 架构都可以快速集成各种大语言模型&#xff0c;本文将讲述如何通过 Fast API LangServe 快速的搭建一个后台 Rest API 服务。LLM 这些框架现在主打一个就是快速&#xff0c;…

网络状态码都是怎么回事,怎么监测状态码

一、状态码概览 HTTP状态码&#xff0c;作为HTTP协议中不可或缺的一部分&#xff0c;是服务器对客户端请求处理结果的直观反馈。它们由三位数字构成&#xff0c;蕴含着丰富的信息&#xff1a;首位数字定义了响应的大类&#xff0c;后两位则进一步细化了具体状态或错误类型。主…

13 Listbox 组件

13 Listbox 组件 Tkinter 的 Listbox 组件是一个用于显示列表项的控件&#xff0c;用户可以从中选择一个或多个项目。以下是对 Listbox 组件的详细说明和一个使用案例。 Listbox 组件属性 基本属性 width: 控件的宽度&#xff0c;通常以字符数为单位。height: 控件的高度&a…

【C++】String常见函数用法

一、string类对象的常见构造 我们可采取以下的方式进行构造&#xff0c;以下是常用的接口&#xff1a; //生成空字符串 string; //拷贝构造函数 string(const string& str); //用C-string来构造string类对象 string(const char* s); //string类对象中包含n个字符c strin…

C++ 之网络编程基础复习总结

基础 IP 地址可以在网络环境中唯一标识一台主机。 端口号可以在主机中唯一标识一个进程。 所以在网络环境中唯一标识一个进程可以使用 IP 地址与端口号 Port 。 字节序 TCP/IP协议规定&#xff0c;网络数据流应采用大端字节序。 大端&#xff1a;低地址存高位&#xff0c…