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

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

文章目录

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

参考

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

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

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

基本拖拽

在这里插入图片描述

基本缩放

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

基本Scalable

在这里插入图片描述

基本旋转

在这里插入图片描述

基于原点的拖拽和旋转

在这里插入图片描述

关于练习源码

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP详解(二)滑动窗口/流量控制

本文解释了TCP为何能保证数据传输的可靠性,以及如何保证整个网络的顺畅。 1 网络分层模型 这是一切的本质。网络被设计成分层的,所以网络的操作就可以称作一个“栈”,这就是网络协议栈的名称的由来。在具体的操作上,数据包最终形…

20. OTA流程 - 2

1. 概述 BES蓝牙方案自带OTA功能,支持SPP和BLE。 建议采用BLE的功能,因为苹果手机默认不支持SPP。 2. OTA框架 OTA时,耳机端需要先进入OTA状态 2.1 SPP升级

Nginx--代理与负载均衡(扩展nginx配置7层协议及4层协议方法、会话保持)

前言:本博客仅作记录学习使用,部分图片出自网络,如有侵犯您的权益,请联系删除 一、代理原理 1、反向代理产生的背景 单个服务器的处理客户端(用户)请求能力有一个极限,当接入请求过多时&#…

【网络安全】SSO登录过程实现账户接管

未经许可,不得转载。 文章目录 正文正文 登录页面展示了“使用 SSO 登录”功能: 经分析,单点登录(SSO)系统的身份验证过程如下: 1、启动SSO流程:当用户点击按钮时,浏览器会发送一个GET请求到指定的URL: /idp/auth/mid-oidc?req=[UNIQUE_ID]&redirect_uri=[REDI…

Leetcode JAVA刷刷站(41)缺失的第一个正数

一、题目概述 二、思路方向 为了找到未排序整数数组中未出现的最小正整数,并满足时间复杂度为 O(n) 和只使用常数级别额外空间的要求,我们可以采用原地哈希(也称为索引哈希)的方法。这个方法的基本思想是将每个数字(如…

[C++进阶]二叉树进阶的一些面试题(一)

首先我们先回忆我们过去学的二叉树和最近学的二叉搜索树,来完成下面的题目: 606. 根据二叉树创建字符串 这道题属于与基础题,首先我们观察输入输出样例可以得到如果root->left为空,root->right不为空时,我们的空格仍然需要保留,如果当前节点有两个孩子,那我…

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

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

TinyEngine是什么?

TinyEngine 是 OpenTiny 项目下的一个开源低代码引擎,旨在帮助开发者快速构建应用程序。它提供了可视化搭建页面的能力,支持在线实时构建和二次开发或集成,适用于多种场景的低代码平台开发,例如资源编排、服务端渲染、模型驱动、移…

拉取/启动kafka的docker镜像

拉取/启动kafka的docker镜像 1、拉取kafka镜像2、移除docker镜像(演示)3、查看镜像是否拉取成功4、通过docker启动kafka容器5、查看是否有启动的容器 1、拉取kafka镜像 因为一些原因,无法从dockerhub直接拉取kafka的docker镜像,我将原来拉到kafka3.7.0的…

后端开发刷题 | 寻找峰值【二分法】

描述 给定一个长度为n的数组nums,请你找到峰值并返回其索引。数组可能包含多个峰值,在这种情况下,返回任何一个所在位置即可。 1.峰值元素是指其值严格大于左右相邻值的元素。严格大于即不能有等于 2.假设 nums[-1] nums[n] −∞ 3.对于…

MQ死信对列

面试题:你们是如何保证消息不丢失的? 1、什么是死信 死信就是消息在特定场景下的一种表现形式,这些场景包括: 1. 消息被拒绝访问,即消费者返回 basicNack 的信号时 或者拒绝basicReject 2. 消费者发生异常&#xff0…

保存数据至后台表

保存数据至后台表-供大数据平台使用-JOB程序 *&---------------------------------------------------------------------* *&程序名称 :ZBD_JOB_001 *&程序描述 : 保存数据至后台表-供大数据平台使用-JOB程序 *…

数据结构:线性结构之顺序表、链表篇

数据结构:顺序表、链表篇 线性表一、顺序表(一)顺序表的结构定义(二)顺序表的功能实现1、初始化2、销毁3、扩容4、插入5、删除 (三)顺序表例题分析1、删除有序数组中的重复项2、合并两个有序数组…

大数据技术——DolphinScheduler的集群部署

目录 第1章 DolphinScheduler简介 1.1 DolphinScheduler概述 1.2 DolphinScheduler核心架构 第2章 DolphinScheduler部署说明 2.1 软硬件环境要求 2.1.1 操作系统版本要求 2.1.2 服务器硬件要求 2.2 部署模式 2.2.1 单机模式 2.2.2 伪集群模式 2.2.3 集群模式 第3章…

进程间通信—无名管道

gg shiftg快速对齐 加锁顺序问题时,如果解锁了,两个同时申请抢锁,谁抢到了运行谁,循环迭代时释放锁也是同时申请锁,循环部分如果没抢到锁就进入循环等待 总结: IPC 进程间通信 interprocess communicate //signal…

免费简单的制作3D卡通建模——Fuse软件和Readyplayer的使用介绍

最终效果 文章目录 最终效果一、使用Fuse软件去Steam下载安装捏人选择身体部位自定义人物细节参数换装贴图修改导出OBJ文件即可 二、使用ReadyplayerReadyplayer官网地址选择从模板开始,或者拍照选择图片进行捏脸将模型导入Unity通过Readyplayer官方插件导入模型通过…

UI设计:蒸汽波风格页面有啥特征,应用哪些场景?

一、什么是蒸汽波风格 蒸汽波风格(Steampunk)是一种将19世纪工业时代的技术和想象力与未来科技相结合的艺术和文化流派。它通常描绘了一个类似维多利亚时代的世界,其中蒸汽动力是主要能源,机械装置和复杂的齿轮系统被广泛应用。 …

若依服务器上云部署

准备条件:安装好mysql和redis并配置好密码。 1.安装JDK,我这里使用的是1.8 wget --no-check-certificate --no-cookies --header "Cookie: oraclelicenseaccept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jdk/8u131-b11/…

idea 对于mybatis-plus框架JRebelX和XRebel热启动失效问题

1.mybatis-plus不需要使用热启动插件,修改完代码后,直接重新编译一下即可,不需要重启 2.如果是mapper.xml文件,则直接安装JRebel MybatisPlus extension 插件即可完成mapper.xml静态文件更改进行热加载

XSS小游戏(题目+解析)DOM破坏!!!

文章目录 一、Ma Spaghet!二、Jefff三、Ugandan Knuckles四、Ricardo Milos五、Ah Thats Hawt六、Ligma七、Mafia方法一:可以用匿名函数来试试方法二:利用toString方法方法三:利用location和hash切片slice 八、Ok, Boomer九、svg十、DOM破坏十…