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

react使用拖拽，缩放组件，采用react-rnd解决 -完整版

news 来源：原创 2025/8/21 11:17:05

屏幕录制2025-03-10 10.16.06

以下代码仅提供左侧可视化区域
右侧数据根据你们的存储数据来
大家直接看Rnd标签设置的属性即可！！！！！

/*** 用户拖拽水印的最终位置信息*/
export interface ProductWatermarkValue {watermark?: ProductWatermarkManagerValue;position: {x: number; // 水印在图片上的水平位置y: number; // 水印在图片上的垂直位置};size: {width: number; // 水印的宽度（相对于商品图片的宽度）height: number; // 水印的高度（相对于商品图片的高度）};
}
/*** 用户上传的水印详细信息，比如路径，宽高*/
export interface ProductWatermarkManagerValue {id: string;name: string;fileUrl: string;width: number;height: number;type: ProductWatermarkManagerValueType;
}

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Rnd } from 'react-rnd';
import { Dispatch } from 'redux';
import { actions } from '@comall-backend-builder/core';
import { Entity } from '@comall-backend-builder/core/lib/parser';
import './index.less';const prefix = 'product-main-image-watermark-preview';
interface Props {dispatch: Dispatch;entity: Entity;componentId: any;preview: any;
}
interface State {/*** 正在操作中*/isDragging: boolean;
}
export class productMainImageWatermarkRulePreview extends Component<Props, State> {constructor(props: Props) {super(props);this.state = {isDragging: false,};}getWatermarkRule = () => {const { preview } = this.props;return preview?.baseInfo?.watermarkRule;};getPreviewProduct = () => {const { preview } = this.props;const goods = preview?.baseInfo?.goods || [];const isPreviewGoods = goods.find((item: any) => {return item.isPreview;});return isPreviewGoods;};onChangeWatermarkRule = (ruleWatermark: any) => {const { dispatch, componentId } = this.props;dispatch(actions.formChangeAction(componentId, 'baseInfo.watermarkRule', ruleWatermark));};handleDragStart = (e: any) => {e.preventDefault();e.stopPropagation();this.setState({isDragging: true,});};handleDragStop = (e: any, d: any) => {e.preventDefault();e.stopPropagation();this.setState({isDragging: false,});const watermarkRule = this.getWatermarkRule();watermarkRule.position = {x: d.x > 0 ? d.x * 2 : 0,y: d.y > 0 ? d.y * 2 : 0,};this.onChangeWatermarkRule({ ...watermarkRule });};handleResizeStart = (e: any) => {e.preventDefault();e.stopPropagation();this.setState({isDragging: true,});};handleResizeStop = (e: any, direction: any, ref: any, delta: any, position: any) => {e.preventDefault();e.stopPropagation();this.setState({isDragging: false,});const watermarkRule = this.getWatermarkRule();const sizeWidth = ref.style.width.replace('px', '');const sizeHeight = ref.style.height.replace('px', '');//因为左侧模拟器是375px，后端存储的是750px的，所以Rnd数据需要乘以2watermarkRule.size = {width: `${sizeWidth * 2}px`,height: `${sizeHeight * 2}px`,};watermarkRule.position = {x: position.x > 0 ? position.x * 2 : 0,y: position.y > 0 ? position.y * 2 : 0,};this.onChangeWatermarkRule({ ...watermarkRule });};render() {const watermarkRule = this.getWatermarkRule();if (!watermarkRule) {return null;}const { position, size, watermark } = watermarkRule;const previewGoods = this.getPreviewProduct();const pic = previewGoods?.productPic || '';const { isDragging } = this.state;const style = {backgroundImage: pic ? `url(${pic})` : undefined,};const sizeWidth = size && size.width ? size.width.replace('px', '') : 0;const sizeHeight = size && size.height ? size.height.replace('px', '') : 0;//因为后端存储的是750px的，左侧模拟器是375px，所以页面渲染数据需要除2const rndSize = {width: `${sizeWidth / 2}px`,height: `${sizeHeight / 2}px`,};const rndPosition = {x: position.x / 2,y: position.y / 2,};console.log('存储大小size,position', size, position);console.log('展示大小rndSize,rndPosition', rndSize, rndPosition);const isDraggingStyle = {opacity: isDragging ? 0.8 : 1,border: isDragging ? '2px solid #1890ff' : undefined,};return (<div className={prefix}><div className={`${prefix}__bg`} style={style}><RndmaxHeight={375}maxWidth={375}size={rndSize}position={rndPosition}bounds="parent"onDragStart={this.handleDragStart}onDragStop={this.handleDragStop}onResizeStart={this.handleResizeStart}onResizeStop={this.handleResizeStop}resizeParentMore={true} // 如果需要阻止父容器跟随大小变化，可以设置为falseenableResizing={{top: true,right: true,bottom: true,left: true,topRight: true,bottomRight: true,bottomLeft: true,topLeft: true,}}resizeHandles={['se', 'sw', 'ne', 'nw']}style={isDraggingStyle}onClick={(e: any) => e.stopPropagation()}lockAspectRatio={true}><imgsrc={watermark?.fileUrl}alt=""style={{ width: '100%', height: '100%' }}/></Rnd></div></div>);}
}const mapStateToProps = (_state: any, props: any) => {let preview = null;let componentId = null;const entityId = props.entity.id;for (var compId in _state.components) {const comp = _state.components[compId];if ((comp.type === 'CreateForm' || comp.type === 'EditForm') &&comp.entityId === entityId) {preview = comp.fields;componentId = compId;}}return { preview: preview, componentId: componentId };
};export const ProductMainImageWatermarkRulePreview = connect(mapStateToProps)(productMainImageWatermarkRulePreview
);

.product-main-image-watermark-preview{&__bg{margin-right: 10px;overflow: hidden;width: 375px ;min-width: 375px;height: 375px;position: relative;border: 1px solid #ccc;background-position: center;background-repeat: no-repeat;background-size: cover;}
}

开发过程中遇到的问题
1.在使用过程中，火狐浏览器出现一拖拽，就打开了浏览器新标签页
解决方案：在方法调用处理中新增以下两个代码

e.preventDefault();
e.stopPropagation();

2.在使用过程中，用户需要自己上传的水印在左侧渲染中，拉伸时，是等比例放大或缩小的，而不是用户自己控制拉伸大小
解决方案：Rnd标签设置属性

  lockAspectRatio={true}

希望以上代码对大家有帮助❤️

react使用拖拽，缩放组件，采用react-rnd解决 -完整版

屏幕录制2025-03-10 10.16.06 以下代码仅提供左侧可视化区域右侧数据根据你们的存储数据来大家直接看Rnd标签设置的属性即可！！！！！ /*** 用户拖拽水印的最终位置信息*/ export interface ProductWatermarkValue {wat…...

编程日记 2025/8/21 11:17:05

通过 ElasticSearch的Python API和`curl` 命令获取Elasticsearch 所有索引名称

导言在大数据管理和实时搜索场景中，Elasticsearch 是一款不可或缺的工具。无论是开发调试、数据维护，还是系统监控，快速列出所有索引名称都是一个高频需求。本文将手把手教你如何通过 Python 客户端连接 Elasticsearch，并用两种方…...

编程日记 2025/8/21 6:41:45

Flutter：StatelessWidget vs StatefulWidget 深度解析

目录 1. 引言 2. StatelessWidget（无状态组件） 2.1 定义与特点 2.2 代码示例 3. StatefulWidget（有状态组件） 3.1 定义与特点 3.2 代码示例 4. StatelessWidget vs StatefulWidget 对比 5. StatefulWidget 生命周期 5.1…...

编程日记 2025/8/21 11:15:13

[密码学实战]Java实现国密TLSv1.3单向认证

一、代码运行结果 1.1 运行环境 1.2 运行结果 1.3 项目架构二、TLS 协议基础与国密背景 2.1 TLS 协议的核心作用 TLS（Transport Layer Security）是保障网络通信安全的加密协议，位于 TCP/IP 协议栈的应用层和传输层之间，提供： • 数据机密性：通过对称加密算法（如 AE…...

编程日记 2025/8/16 9:54:15

蓝桥杯省赛真题C++B组2024-握手问题

一、题目【问题描述】小蓝组织了一场算法交流会议，总共有 50 人参加了本次会议。在会议上，大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手(且仅有一次)。但有 7 个人，这 7 人彼此之间没有进行握手(但这…...

编程日记 2025/8/20 17:07:09

项目实操分享：一个基于 Flask 的音乐生成系统，能够根据用户指定的参数自动生成 MIDI 音乐并转换为音频文件

在线体验音乐创作：AI Music Creator - AI Music Creator 体验者账号密码admin/admin123 系统架构 1.1 核心组件 MusicGenerator 类负责音乐生成的核心逻辑包含 MIDI 生成和音频转换功能管理音乐参数和音轨生成 FluidSynth 集成用于 MIDI 到音频的转换 …...

编程日记 2025/8/16 12:36:57

Java开发者如何接入并使用DeepSeek

目录一、准备工作二、添加DeepSeek SDK依赖三、初始化DeepSeek客户端四、数据上传与查询五、数据处理与分析六、实际应用案例七、总结【博主推荐】：最近发现了一个超棒的人工智能学习网站，内容通俗易懂，风格风趣幽默&#xff…...

编程日记 2025/8/19 23:09:44

多方安全计算(MPC)电子拍卖系统

目录一、前言二、多方安全计算(MPC)与电子拍卖系统概述2.1 多方安全计算(MPC)的基本概念2.2 电子拍卖系统背景与需求三、MPC电子拍卖系统设计原理3.1 系统总体架构3.2 电子拍卖中的安全协议3.3 数学与算法证明四、数据加解密模块设计五、GPU加速与系统性能优化六、GUI设计与系…...

编程日记 2025/8/16 9:54:23

【数据库系统概论】第十一章并发控制

第十一章并发控制 11.1 并发控制概述（1）丢失修改（2）不可重复读（3）读“脏”数据 11.2 封锁11.2.1 封锁的概念11.2.2 基本封锁类型（1）排它锁/X锁/写锁（2）共享锁…...

编程日记 2025/8/16 10:00:38

C语言_数据结构总结4：不带头结点的单链表

纯C语言代码，不涉及C 0. 结点结构 typedef int ElemType; typedef struct LNode { ElemType data; //数据域 struct LNode* next; //指针域 }LNode, * LinkList; 1. 初始化不带头结点的初始化，即只需将头指针初始化为NULL即可 void Init…...

编程日记 2025/8/16 9:54:17

用CSS画一条0.5px的线

上次面试前端被问到了这个问题，感觉有点懵懵的，我就回答了一个scaleY(0.5),这个是真的没想到，希望有需要的朋友可以去看看。随便记住一种就行。 1.第一种方式：通过缩放1px的线条实现视觉上的0.5px效果，兼容性较好。 …...

编程日记 2025/8/18 21:36:49

知识库全链路交互逻辑

阶段顺序 URL输入 → 网络连接 → 前端请求 → 后端处理 → 数据库交互 → 数据返回 → 前端渲染 → 连接关闭阶段1：用户输入URL 用户行为：在浏览器地址栏输入 https://knowledge.com/search?keyword金融趋势浏览器动作： “浏览器解析U…...

编程日记 2025/8/20 2:11:14

BambuStudio学习笔记：Model

# Model.hpp 核心模型结构说明## 文件概述该头文件定义了3D打印数据处理的核心数据结构，包含模型对象、体积、实例、材料等关键类。主要功能包括： - 三维模型数据存储与管理 - 模型变换操作（平移/旋转/缩放） - 打印参数配置 - 多…...

编程日记 2025/8/16 11:36:08

Spring （八）AOP-切面编程的使用

目录实现步骤： 1 导入AOP依赖 2 编写切面Aspect 3 编写通知方法 4 指定切入点表达式 5 测试AOP动态织入图示： 一实现步骤： 1 导入AOP依赖 <dependency><groupId>org.springframewor…...

编程日记 2025/8/18 19:46:48

【Go每日一练】构建一个简单的用户信息管理系统

👻创作者：丶重明 👻创作时间：2025年3月7日 👻擅长领域：运维目录 1.😶‍🌫️题目：简单的用户信息管理系统2.😶‍🌫️代码开发3.😶‍&a…...

编程日记 2025/8/19 17:11:38

PathRAG：通过图剪枝的方法优化Graph-based RAG的性能方法浅析

PathRAG 也是一种新型 Graph-based RAG 方法，通过检索索引图中的关键关系路径，减少噪声并优化 LLM 提示。其核心创新在于基于流的剪枝算法和路径为基础的提示策略，特别适用于捕捉复杂数据集中的关系。（其实可以看做相比GraphRAG假…...

编程日记 2025/8/17 16:42:53

ElementUI 级联选择器el-cascader启用选择任意一级选项，选中后关闭下拉框

1、启用选择任意一级选项在 el-cascader 标签上加上配置项： :props"{ checkStrictly: true }"例如： <el-cascaderref"selectedArrRef"v-model"selectedArr":options"optionsList":props"{ checkStri…...

编程日记 2025/8/16 9:54:31

【软件逆向】QQ 连连看小游戏去广告与一键消除实现

目录一、背景介绍二、去广告实现 2.1 分析广告加载流程 2.2 逆向分析广告加载逻辑 2.3 去广告方案三、一键消除外挂实现 3.1 分析游戏逻辑 3.2 编写外挂插件 3.3 注入外挂： 四、一键消除效果展示五、额外扩展一、背景介绍 QQ 连连看是一款经典的休闲…...

编程日记 2025/8/16 10:01:40

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动

vue el-select 省市区三级联动 vue使用第三方插件实现省市区三级联动网上找了好多教程，都是使用el-cascader级联选择器的省市区选择器，但是几乎没有三个单独的el-select的进行关联的三级省市联动组件效果第一步:先安装省市区element-ui的插件 npm install element-china-a…...

编程日记 2025/8/21 2:53:06

【GPT入门】第8课大语言模型的自洽性

【GPT入门】第8课大语言模型的自洽性 1.自洽性概念2.代码（观察执行结果）3.自洽性核心思想 1.自洽性概念大模型的自洽性（self - consistency）是指在推理阶段，大模型通过生成多个答案并选择出现频率最高的那个&#x…...

编程日记 2025/8/18 13:32:21

工程化与框架系列（28）--前端国际化实现

前端国际化实现 🌍 引言前端国际化（i18n）是现代Web应用中的重要组成部分，它能够让应用支持多语言和多地区的用户使用。本文将深入探讨前端国际化的实现方案和最佳实践，包括文本翻译、日期时间格式化、货币处理等方面…...

编程日记 2025/8/16 9:54:08

【阿里云】操作系统控制台操作体验与性能评测全解析

引言在现代的云计算环境中，操作系统控制台是进行系统管理和运维的重要工具。它不仅帮助用户高效地管理云端资源，还提供了智能助手、系统诊断、性能观测等功能，能够提升操作系统的使用效率，增强用户的操作体验。本文简要介绍了操…...

编程日记 2025/8/19 2:33:14

面试之《IntersectionObserver的使用》

IntersectionObserver 是一个 Web API，用于异步观察目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的变化。这在很多场景下非常有用，比如懒加载图片、实现无限滚动加载更多内容等。下面详细介绍它的使用方法。基本原理 …...

编程日记 2025/8/19 10:08:05

在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践

文章目录在 Spring Boot 2.7.x 中引入 Kafka-0.9 的实践一、下载 Kafka-0.9二、启动 Zookeeper 和 Kafka三、创建 Spring Boot 项目四、引入 kafka 依赖五、移除 Kafka 自动配置六、编写 Kafka 生产者6.1 Kafka配置类6.2 生产者监听类七、编写Controller发送Kafka八、验证消费…...

编程日记 2025/8/15 18:39:40

【MACOS】用户数据过多

进入下面的路径下找到.Spotlight-V100文件夹 /System/Volumes/Data修改选线通过终端权限不够在finder中进行查看然后解锁然后添加权限使用代码查看存储数据。 diskutil apfs list...

编程日记 2025/8/17 21:25:58

鸿蒙系统中的持续部署

鸿蒙操作系统，作为一款面向未来的分布式操作系统，旨在为不同的设备提供统一的操作系统平台。它支持多种终端设备，包括但不限于智能手机、平板电脑、智能穿戴设备和物联网（IoT）设备等，并且能够实现跨平台的无…...

编程日记 2025/8/16 12:29:43

1. 下载并安装 MySQL Yum 仓库从 MySQL 官方网站下载并安装 Yum 仓库配置文件。 # 下载MySQL 8.0的Yum仓库包 wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm # 安装Yum仓库包 sudo rpm -ivh mysql80-community-release-el7-5.noarch.rpm2. 启…...

编程日记 2025/8/16 10:00:48

几种常见的虚拟环境工具（Virtualenv、Conda、System Interpreter、Pipenv、Poetry）的区别和特点总结

在 PyCharm 中创建虚拟环境是一个非常直接的过程，可以帮助你管理项目依赖，确保不同项目之间的依赖不会冲突。通过 PyCharm 创建虚拟环境打开 PyCharm 并选择或创建一个项目。打开项目设置： 在 Windows/Linux 上，可以通过点击…...

编程日记 2025/8/20 11:24:33

VScode：运行程序停止后，频繁出现终端进程被终止

VScode里面powershell被迫关闭 bug场景排查原因解决办法 bug场景系统：Windows IDE：Visual Studio Code 停止运行程序后，按向上箭头想要执行上一步命令，忽然终端页面强行关闭，并报错如下： 终端进程 &quo…...

编程日记 2025/8/16 9:53:50

PHP框架加载不上.env文件中的变量

以lumen5.5框架为例，根目录中bootstrap文件夹下的app.php文件中 (new Dotenv\Dotenv(__DIR__./../))->load(); 是读取所有.env中的文件的，这个是正常的，但是在代码中的任何位置或者在config目录下的databases.php里，代码如…...

编程日记 2025/8/19 10:07:52

Linux：基本指令与内涵理解

1.文件操作指令 1.1 ls ls指令用于查看指定层级文件夹下的文件或文件夹基本格式：ls (选项) (查看层级） 其中选项处不写就默认是显示文件名，查看层级默认是当前层级选项1： -l 作用：将查找文件的详细信息显示出来我们…...

编程日记 2025/8/17 19:50:44

C++设计模式-抽象工厂模式：从原理、适用场景、使用方法，常见问题和解决方案深度解析

一、模式基本概念 1.1 定义与核心思想抽象工厂模式（Abstract Factory Pattern）是创建型设计模式的集大成者，它通过提供统一的接口来创建多个相互关联或依赖的对象族，而无需指定具体类。其核心思想体现在两个维度： …...

编程日记 2025/8/21 2:53:16

LINUX系统安装+添加共享目录

一、前言 Windows或mac系统中创建Linux工作环境是基于VMware和SL(Scientific Linux)，下面分别安装二者。二、VMware软件安装及注册 1、双击VMware安装包 2、点击下一步 3、勾选接受许可，并点击下一步 4、更改路径（建议更改为容易找到的路…...

编程日记 2025/8/21 2:45:38

《UE5_C++多人TPS完整教程》学习笔记34 ——《P35 网络角色（Network Role）》

本文为B站系列教学视频《UE5_C多人TPS完整教程》 —— 《P35 网络角色（Network Role）》的学习笔记，该系列教学视频为计算机工程师、程序员、游戏开发者、作家（Engineer, Programmer, Game Developer, Author） Stephe…...

编程日记 2025/8/16 9:55:36

成为git砖家(9): rebase进阶: 拆分commit为多个

问题描述当一次性 git add 了多个修改点， 并且快速的执行了 git commit 后， 你觉得有点懊恼： 明明可以独立为两次或多次 commit， 揉在一块导致历史记录不太清晰。比如我在 nn1 这个练手项目中， 最近一次 commit&am…...

编程日记 2025/8/20 13:41:26

pytorch retain_grad vs requires_grad

requires_grad大家都挺熟悉的，因此穿插在retain_grad的例子里进行捎带讲解就行。下面看一个代码片段： import torch# 创建一个标量 tensor，并开启梯度计算 x torch.tensor(2.0, requires_gradTrue)# 中间计算：y 依赖于 x&#x…...

编程日记 2025/8/18 12:58:48

Axure常用变量及使用方法详解

点击下载《Axure常用变量及使用方法详解.pdf》摘要 Axure RP 作为一款领先的前端原型设计工具，提供了全面的变量和函数系统，以支持复杂的交互设计和动态内容展示。本文将从专业角度详细解析 Axure 中的全局变量、中继器数据集变量/函数、元件变量…...

编程日记 2025/8/21 2:53:27

为企业级AI交互系统OpenWebUI集成LDAP用户权限认证（2）

为企业级AI交互系统OpenWebUI集成LDAP用户权限认证（2）本文介绍如何OpenWebUI系统集成LDAP认证服务，及其用户权限及用户组设置。推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录…...

编程日记 2025/8/20 17:22:19

mac 被禁用docker ui后，如何使用lima虚拟机启动docker

本机macos 安装lima brew install lima创建配置 echo "\\ndynamic:\n big-sur:\n image: docker://docker:git\n linux:\n image: docker.io/limasoftware/ubuntu:20.04 \\n" > ~/.lima/default.yaml启动名叫default的虚拟机 limactl start default进…...

编程日记 2025/8/20 14:57:31

C#实现AES-CBC加密工具类（含完整源码及使用教程）

一、AES-CBC加密应用场景 AES（Advanced Encryption Standard）作为全球公认的安全加密标准，广泛使用在以下场景： API通信加密：保护HTTP接口传输的敏感数据（如身份令牌、支付信息）文件安全存储&…...

编程日记 2025/8/20 4:52:22

Unity辅助工具_头部与svn

Unity调用者按钮增加PlaySideButton using QQu; using UnityEditor; using UnityEngine; [InitializeOnLoad] public class PlaySideButton {static PlaySideButton(){UnityEditorToolbar.RightToolbarGUI.Add(OnRightToolbarGUI);UnityEditorToolbar.LeftToolbarGUI.Add(OnLe…...

编程日记 2025/8/16 12:00:53

相关文章：