以下代码仅提供左侧可视化区域
右侧数据根据你们的存储数据来
大家直接看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}

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