当前位置: 首页 > news >正文

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

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

文章目录

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

参考

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

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

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

基本拖拽

在这里插入图片描述

基本缩放

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

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

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

相关文章:

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

在前面咱们的自研低代码海报制作平台学习分享计划中分享了自己开发的基本拖拽组件,也只是做了最简单的基本实现。真要写产品,更多还是依赖相关的开源优秀库。 文章目录 参考基本拖拽基本缩放基本Scalable基本旋转基于原点的拖拽和旋转关于练习源码 参考 …...

公开测评:文件防泄密系统哪家好|4款文件防泄密软件推荐

在文件防泄密系统领域,有多款软件以其高效、安全和全面的功能脱颖而出,为企业数据保护提供了有力支持。以下是四款值得推荐的文件防泄密软件,它们各具特色,能够满足不同企业的数据安全需求。 1. 安企神软件 7天试用版https://wor…...

【wiki知识库】09.欢迎页面添加(统计浏览量)Vue修改

目录 ​编辑 一、今日目标 二、新增the-welcome组件 2.1 template 2.2 script 2.2.1 getStatistic 2.2.2 get30DayStatistic 一、今日目标 上篇文章链接:【wiki知识库】08.添加用户登录功能--前端Vue部分修改-CSDN博客 今天就要实现最后的东西了&#xff0c…...

ui自动化难点

位置坐标:可以通过滑动等方式实现 颜色显示:UIAuto.DEV (devsleep.com) --此工具可以解决很多属性上无法解决的问题 原理: 对系统控件的选择和点击实现该方法...

静态路由与默认路由和实验以及ARP工作原理

目录 1.静态路由和默认路由 1.1 静态路由 1.2 默认路由 1.3 主要区别总结 2.实验 2.1 实验 2.1.1 实验top 2.1.2 实验要求 2.2 实验配置 2.2.1 ip信息配置 2.2.2 配置静态 2.2.3配置默认 2.3 实验结果查看 3.为什么第一个ping会显示丢包? 3.1 ARP 工…...

美国洛杉矶大带宽服务器的运维与监控

美国洛杉矶的大带宽服务器因其优越的地理位置、高速的网络连接以及充足的带宽资源,在全球范围内享有很高的声誉。为了确保这些服务器的稳定运行和高效服务,运维与监控工作显得尤为重要。以下是一些关于美国洛杉矶大带宽服务器运维与监控方面的科普内容。…...

AtCoder Beginner Contest 367 A~D

本期封面原图 画师えびら A - Shout Everyday 题意 b点睡觉c点起床&#xff0c;问你a点是不是醒着的 思路 直接判断即可&#xff0c;注意处理跨天的情况 代码 #include <bits/stdc.h> #define mod 998244353 using namespace std; typedef long long ll; typedef …...

oracle 保留两位小数

在Oracle数据库中&#xff0c;保留两位小数可以通过多种函数实现&#xff0c;主要包括ROUND、TRUNC和TO_CHAR函数。每种函数都有其特定的使用场景和效果。 1. ROUND函数 ROUND函数用于对数值进行四舍五入操作&#xff0c;保留指定的小数位数。其基本语法为&#xff1a; ROUN…...

Aop切面技术之存储用户信息

一、背景 在我们日常项目中&#xff0c;常常会将用户的认证信息存入缓存中&#xff0c;方便我们在程序执行中&#xff0c;进行获取用户信息。本篇文章主要是介绍使用自定义注解和AOP切面技术进行实现&#xff0c;这也也是非常容易使用的。 二、代码详解 2.1 自定义注解 定义…...

FreeBSD 针对OpenSSH 高危漏洞发布紧急补丁

近日&#xff0c;FreeBSD 项目的维护者针对OpenSSH 高危漏洞发布了紧急补丁。该漏洞被追踪为 CVE-2024-7589&#xff0c;CVSS 得分为 7.4&#xff08;最高分为 10.0&#xff09;。通过利用该漏洞&#xff0c;黑客能够在权限提升的情况下远程执行任意代码。 根据上周发布的一份…...

【C语言小项目】五子棋游戏

目录 前言 一、游戏规则 1.功能分析 2.玩法分析 3.胜负判定条件 二、游戏实现思路 三、代码实现与函数封装 1.项目文件创建 2.头文件说明 3.函数封装 1&#xff09;菜单实现 2&#xff09;进度条实现 3&#xff09;main函数实现 4&#xff09;Game函数 5&#xff0…...

基于Java语言的能源管理系统-水电气热油数据采集系统

基于Java语言的能源管理系统-水电气热油数据采集系统 介绍 适用于高能耗企业、建筑、工厂、园区的水、电、气、热、油、空压机等能源数据采集、分析、报表&#xff1b; 基于SpringCloud的能源管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管…...

人工智能在肿瘤亚型分类领域的研究进展|顶刊速递·24-08-13

小罗碎碎念 文献日推主题&#xff1a;人工智能在肿瘤亚型分类领域的研究进展 昨天晚上在研究鼻咽癌的病理学诊断指南&#xff0c;看到了下面这段话的时候&#xff0c;我问了自己一个问题——通过AI识别出肿瘤亚型的根本目的是什么&#xff1f;可以衔接哪些具体的下游任务&#…...

Taro+Vue 创建微信小程序

TaroVue 创建微信小程序 一、全局安装 tarojs/cli二、项目初始化三、现在去启动项目吧 一、全局安装 tarojs/cli npm install -g tarojs/cli //安装 npm info tarojs/cli //查看安装信息 如果正常显示版本说明成功了&#xff0c;就直接跳到第二步吧官网说&#xff1a;…...

智能安全守护,寺庙安全用电解决方案

在四川省蓬溪县城北&#xff0c;高峰山以其千年的历史沉淀和独特的文化风貌&#xff0c;默默诉说着道教与佛教交融的传奇。然而&#xff0c;2017年5月31日凌晨的一声巨响&#xff0c;打破了这里的宁静&#xff0c;一场突如其来的大火&#xff0c;让这座承载着无数信徒信仰与梦想…...

加热系统加入达温即停和保温功能

加热系统加入达温即停和保温功能 引言 ​ 我们前一节, 是通过控制io口, 直接控制加热的开关, 但是这太简单粗暴了, 如果只是那样, 和普通的家居电器,是没区别的, 我们想要更智能一点, 就是像咱们自己家的热水壶那样, 水烧滚了(水温达到100摄氏度), 就自动停止了. 加热功能&a…...

C++_2_ inline内联函数 宏函数(2/3)

C推出了inline关键字&#xff0c;其目的是为了替代C语言中的宏函数。 我们先来回顾宏函数&#xff1a; 宏函数 现有个需求&#xff1a;要求你写一个Add(x,y)的宏函数。 正确的写法有一种&#xff0c;错误的写法倒是五花八门&#xff0c;我们先来“见不贤而自省也。” // …...

ROS执行多个节点报错(遥控运动及SLAM建图)

今天在实体机器人中同时执行多个ROS节点: roslaunch rei_robot_base oryxbot_base.launchroslaunch robot_joy robot_joy.launchroslaunch oryxbot_slam oryxbot_slam_local.launch结果全部报错退出了 现在换一种执行方式: roscoreroslaunch rei_robot_base oryxbot_base.la…...

Spring Boot项目中实现文件的上传、下载和预览功能

在Spring Boot项目中实现文件的上传、下载和预览功能&#xff0c;可以通过使用Spring MVC的MultipartFile接口来处理文件上传&#xff0c;并使用HttpServletResponse或Resource来实现文件下载和预览。下面是如何实现这些功能的完整示例。 1. 引入依赖 确保在pom.xml中引入了S…...

【JAVA入门】Day21 - 时间类

【JAVA入门】Day21 - 时间类 文章目录 【JAVA入门】Day21 - 时间类一、JDK7前的时间相关类1.1 Date1.2 SimpleDateFormat1.3 Calendar 二、JDK8新增的时间相关类2.1 Date 相关类2.1.1 ZoneId 时区2.1.2 Instant 时间戳2.1.3 ZoneDateTime 带时区的时间 2.2 DateTimeFormat 相关…...

多智能体编排实战:从架构设计到生产部署的12周训练指南

1. 项目概述与核心价值最近在探索如何系统性地掌握多智能体编排技术时&#xff0c;我遇到了一个名为“Shadow Dojo”的开源项目。这个名字很有意思&#xff0c;“道场”一词本身就意味着一个需要持续练习、精进技艺的地方。这个项目将自己定位为“训练场”&#xff0c;目标非常…...

从零训练专属风格模板:Midjourney V6.2风格参考+ControlNet协同工作流(含Stable Diffusion双向映射对照表)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney风格参考功能详解 Midjourney 的风格参考&#xff08;Style Reference&#xff0c;简称 --sref&#xff09;是一项强大的图像一致性控制机制&#xff0c;允许用户将一张参考图的视觉风格&…...

【信息科学与工程学】计算机科学与自动化——第一百五十一篇 云计算操作系统函数说明02

威胁情报与狩猎模块(361-370) 编号 模块/组件类型 模块中的函数名称和函数的参数列表和函数的实现方式 函数的详细功能和计算机科学的所有性能【含参数列表】和功能说明 关联的其他函数【含上下文关系】 和对应模块【含上下文关系】 关联的软件/硬件核心知识点【需要涵…...

RT-Thread Smart下基于74LV595的KSZ8081网卡复位与驱动移植实战

1. 硬件连接与复位逻辑解析 第一次拿到i.MX6ULL开发板时&#xff0c;我发现KSZ8081网卡的复位引脚竟然接在了74LV595芯片上&#xff0c;这和常见的直接连接GPIO的设计完全不同。这种设计虽然节省了GPIO资源&#xff0c;但给驱动开发带来了新挑战。 74LV595是典型的串行输入并行…...

基于RK3568与CODESYS的工业边缘控制器:软PLC如何重塑自动化设备核心

1. 为什么工业自动化需要软PLC&#xff1f; 记得五年前我第一次接触传统PLC时&#xff0c;被它的价格吓了一跳。一台西门子S7-1200基础型号就要上万元&#xff0c;加上各种扩展模块轻松突破两万。更让我头疼的是&#xff0c;每次设备升级都要重新采购硬件&#xff0c;旧设备只能…...

Symbol Opener:基于URI与LSP实现终端代码符号一键跳转

1. 项目概述&#xff1a;一个能让你在终端里“点击”代码符号的插件 如果你和我一样&#xff0c;每天大部分时间都泡在终端里&#xff0c;那你肯定遇到过这个场景&#xff1a;运行 git log 或者 grep 命令&#xff0c;终端输出了一堆函数名、类名&#xff0c;你想立刻跳转…...

高性能零依赖Vue3跑马灯组件:企业级动态内容展示解决方案

高性能零依赖Vue3跑马灯组件&#xff1a;企业级动态内容展示解决方案 【免费下载链接】vue3-marquee A simple marquee component with ZERO dependencies for Vue 3. 项目地址: https://gitcode.com/gh_mirrors/vu/vue3-marquee Vue3-Marquee是一个专为Vue 3设计的零依…...

全栈开发真的是万能解药吗?3年全栈开发者的血泪教训

一、从测试视角看全栈热&#xff1a;光环下的误解作为软件测试从业者&#xff0c;你一定不止一次在行业论坛、招聘启事里看到“全栈开发”这四个字。它像一个自带聚光灯的概念&#xff0c;被描绘成能独当一面解决所有技术问题的“万能解药”——前端页面布局、后端逻辑搭建、数…...

经营分析≠财务分析,经营分析必看的3条路径分析

每个月开经营分析会&#xff0c;我最怕看到什么&#xff1f;就是财务把利润表从头到尾念了一遍&#xff0c;收入多少、成本多少、费用多少&#xff0c;然后开始读PPT。念完就散会。问题解决了吗&#xff1f;没有。说实话&#xff0c;我第一次看这种汇报也觉得数据很全&#xff…...

QGIS图层驾驭术 | 新手必会的三大核心操作

1. 图层基础&#xff1a;理解QGIS的"透明胶片"逻辑 第一次打开QGIS时&#xff0c;看到空白的画布和一堆按钮&#xff0c;很多人会感到无从下手。其实理解图层概念最简单的方式&#xff0c;就是想象你在用传统方法制作地图&#xff1a;把不同内容的透明胶片叠在一起。…...