脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React图片缩放

React实现图片缩放的示例代码

 更新时间：2023年10月09日 08:22:44   作者：codepoet  
这篇文章主要为大家详细介绍了如何使用React实现图片缩放的功能,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以了解下

前言

用 React 实现图片缩放的功能。当拖动图片上四个角会沿着 x 轴放大和缩小图片。其中图片缩放的核心功能抽成 hook 来使用，需要把 hook 提供的 ref 设置到需要改变大小的节点的，当宽度改变时会改变 width 的 state 。

流程图

hook 代码

useImageResizer.tsx

import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
// 改成一个期望的最小图片宽度常量
import { FLOAT_IMAGE_MINI_WIDTH } from 'src/constants/view';
import './image-resizer.less';
export enum ResizeDirection {
  LeftTop,
  LeftBottom,
  RightTop,
  RightBottom,
}
export interface ImageResizerProps {
  isActive: boolean;
  handleResizeStart?: (direction: ResizeDirection) => void;
  handleResizeEnd?: () => void;
}
export const useImageResizer = ({ isActive, handleResizeStart, handleResizeEnd }: ImageResizerProps) => {
  const [imageWith, setImageWidth] = useState(0);
  const [divElement] = useState<HTMLDivElement>(document.createElement('div'));
  const isDraggingRef = useRef(false);
  // 是否在拖动
  const [isDragging, setIsDragging] = useState(false);
  const imageContainerRef = useRef<HTMLDivElement>(null);
  const handleMouseMove = useCallback(
    (e: MouseEvent, resizeDirection: ResizeDirection, startX: number, imageWidth: number) => {
      // 计算移动距离
      const moveX = (e.clientX - startX) * 1;
      // 根据 resize 方向计算新的宽度
      let newWidth = imageWidth;
      switch (resizeDirection) {
        case ResizeDirection.LeftTop:
        case ResizeDirection.LeftBottom:
          newWidth -= moveX;
          break;
        case ResizeDirection.RightTop:
        case ResizeDirection.RightBottom:
          newWidth += moveX;
          break;
        default:
          break;
      }
      // 设置新的宽度
      setImageWidth(Math.max(newWidth, FLOAT_IMAGE_MINI_WIDTH));
    },
    []
  );
  const handleMouseDown = useCallback(
    (e: React.MouseEvent, resizeDirection: ResizeDirection) => {
      isDraggingRef.current = true;
      const startX = e.clientX;
      const imageWidth = imageContainerRef.current?.offsetWidth || 0;
      setIsDragging(true);
      handleResizeStart?.(resizeDirection);
      const handleMouseMoveFun = (e: MouseEvent) => {
        handleMouseMove(e, resizeDirection, startX, imageWidth);
      };
      const handleMouseUpFun = () => {
        isDraggingRef.current = false;
        setIsDragging(false);
        handleResizeEnd?.();
        // 移除监听
        window.removeEventListener('mousemove', handleMouseMoveFun);
        window.removeEventListener('mouseup', handleMouseUpFun);
      };
      window.addEventListener('mousemove', handleMouseMoveFun);
      window.addEventListener('mouseup', handleMouseUpFun);
    },
    [handleResizeStart, handleMouseMove, handleResizeEnd]
  );
  const Resizer = useMemo(
    () => (
      <>
        <div
          className="image-block__resizer-left-top"
          onMouseDown={e => handleMouseDown(e, ResizeDirection.LeftTop)}
        ></div>
        <div
          className="image-block__resizer-left-bottom"
          onMouseDown={e => handleMouseDown(e, ResizeDirection.LeftBottom)}
        ></div>
        <div
          className="image-block__resizer-right-top"
          onMouseDown={e => handleMouseDown(e, ResizeDirection.RightTop)}
        ></div>
        <div
          className="image-block__resizer-right-bottom"
          onMouseDown={e => handleMouseDown(e, ResizeDirection.RightBottom)}
        ></div>
      </>
    ),
    [handleMouseDown]
  );
  useEffect(() => {
    // 把 resizer 渲染到 divElement 上
    divElement.setAttribute('class', 'image-block__resizer');
    ReactDOM.render(Resizer, divElement);
    // 初始化 imageWidth
    setImageWidth(imageContainerRef.current?.offsetWidth || 0);
  }, [Resizer, divElement]);
  useEffect(() => {
    if (!isActive) {
      if (imageContainerRef.current?.contains(divElement)) {
        // 移除 imageContainerRef 上的 resizer
        imageContainerRef.current?.removeChild(divElement);
      }
    } else {
      setImageWidth(imageContainerRef.current?.offsetWidth || 0);
      // 往 imageContainerRef 上添加 resizer
      imageContainerRef.current?.appendChild(divElement);
    }
  }, [Resizer, divElement, imageContainerRef, isActive]);
  return { imageContainerRef, imageWith, isDraggingRef, isDragging };
};

image-resizer.less

.image-block__resizer {
  div {
    box-sizing: border-box;
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, .2) 0px 0px 4px;
    border-radius: 50%;
    z-index: 1;
    touch-action: none;
    background: rgb(30, 111, 255);
  }
  .image-block__resizer-left-top {
    left: 0px;
    top: 0px;
    margin-left: -6px;
    margin-top: -6px;
    cursor: nwse-resize;
  }
  .image-block__resizer-right-top {
    right: 0px;
    top: 0px;
    margin-right: -6px;
    margin-top: -6px;
    cursor: nesw-resize;
  }
  .image-block__resizer-right-bottom {
    right: 0px;
    bottom: 0px;
    margin-right: -6px;
    margin-bottom: -6px;
    cursor: nwse-resize;
  }
  .image-block__resizer-left-bottom {
    left: 0px;
    bottom: 0px;
    margin-left: -6px;
    margin-bottom: -6px;
    cursor: nesw-resize;
  }
}
.image-resize-dragging {
  cursor: move;
  user-select: none;
}

使用

index.tsx

因为图片缩放是在某个特定区域内进行的，所以会有图片最大宽高检测的逻辑，保证图片放大到特定宽度后不再放大。还增加了 delete 键的监听。 imagePosition 是图片对于固定原点的位置信息。

import React, { useState, useCallback, useRef, useMemo, CSSProperties, useEffect, KeyboardEvent } from 'react';
import { useImageResizer, ResizeDirection } from './useImageResizer';
import { PAGE_WIDTH } from 'src/constants/view';
import './index.less';
export interface FloatImage {
  image: string;
  width?: number;
  height?: number;
  top?: number;
  left?: number;
}
export interface FloatImagesProps {
  data: FloatImage[];
  pageHeight: number;
}
interface FloatImageBlockProps {
  data: FloatImage;
  pageHeight: number;
}
interface ImagePosition {
  top?: number;
  left?: number;
  bottom?: number;
  right?: number;
}
export const FloatImageBlock: React.FC<FloatImageBlockProps> = ({ data, pageHeight }) => {
  const { image, width, top = 0, left = 0 } = data;
  const [isActive, setIsActive] = useState(false);
  // 图片位置
  const [imagePosition, setImagePositionState] = useState<ImagePosition>({
    top,
    left,
  });
  const imagePositionRef = useRef<ImagePosition>(imagePosition);
  // 图片最大宽高
  const [imageMaxSize, setImageMaxSize] = useState<{ maxWidth?: number; maxHeight?: number }>({});
  const imageRef = useRef<HTMLImageElement>(null);
  const setImagePosition = useCallback((position: ImagePosition) => {
    setImagePositionState(position);
    imagePositionRef.current = position;
  }, []);
  const getImageInfo = useCallback(() => {
    const imageWidth = imageRef.current?.offsetWidth || 0;
    const imageHeight = imageRef.current?.offsetHeight || 0;
    return { imageWidth, imageHeight };
  }, []);
  const getPositionInfo = useCallback(
    ({ top, left, bottom = 0, right = 0 }: { top?: number; left?: number; bottom?: number; right?: number }) => {
      const { imageWidth, imageHeight } = getImageInfo();
      const newTop = top === undefined ? pageHeight - bottom - imageHeight : top;
      const newLeft = left === undefined ? PAGE_WIDTH - right - imageWidth : left;
      return { top: newTop, left: newLeft };
    },
    [getImageInfo, pageHeight]
  );
  const updateImageData = useCallback(() => {
    const { imageWidth, imageHeight } = getImageInfo();
    const { top, left, right = 0, bottom = 0 } = imagePositionRef.current;
    // 根据 imagePosition 和图片宽高获取最新的 top 和 left
    const newTop = top === undefined ? pageHeight - bottom - imageHeight : top;
    const newLeft = left === undefined ? PAGE_WIDTH - (right + imageWidth) : left;
    setImagePosition({ top: newTop, left: newLeft });
  }, [getImageInfo, pageHeight, setImagePosition]);
  const handleResizeStart = useCallback(
    (direction: ResizeDirection) => {
      // 根据 imagePosition 计算 top 和 left
      const { top: newTop, left: newLeft } = getPositionInfo(imagePositionRef.current);
      const { imageWidth, imageHeight } = getImageInfo();
      let maxWidth: number | undefined;
      let maxHeight: number | undefined;
      let newImagePosition: ImagePosition = {};
      // 根据 direction 设置 imagePosition
      switch (direction) {
        case ResizeDirection.LeftTop:
          newImagePosition = { bottom: pageHeight - newTop - imageHeight, right: PAGE_WIDTH - newLeft - imageWidth };
          maxWidth = imageWidth + newLeft;
          maxHeight = imageHeight + newTop;
          break;
        case ResizeDirection.LeftBottom:
          newImagePosition = { top: newTop, right: PAGE_WIDTH - newLeft - imageWidth };
          maxWidth = imageWidth + newLeft;
          maxHeight = pageHeight - newTop;
          break;
        case ResizeDirection.RightTop:
          newImagePosition = { bottom: pageHeight - newTop - imageHeight, left: newLeft };
          maxWidth = PAGE_WIDTH - newLeft;
          maxHeight = imageHeight + newTop;
          break;
        case ResizeDirection.RightBottom:
          newImagePosition = { top: newTop, left: newLeft };
          maxWidth = PAGE_WIDTH - newLeft;
          maxHeight = pageHeight - newTop;
          break;
        default:
          break;
      }
      if (maxWidth === undefined || maxHeight === undefined) {
        return;
      }
      setImagePosition(newImagePosition);
      // 按照图片宽高比计算最大宽高
      maxWidth = Math.min((maxHeight / imageHeight) * imageWidth, maxWidth);
      maxHeight = Math.min(pageHeight, (maxWidth / imageWidth) * imageHeight);
      if (maxWidth < maxHeight) {
        setImageMaxSize({ maxWidth, maxHeight: maxWidth * (imageHeight / imageWidth) });
      } else {
        setImageMaxSize({ maxHeight, maxWidth: maxHeight * (imageWidth / imageHeight) });
      }
    },
    [getImageInfo, getPositionInfo, pageHeight, setImagePosition]
  );
  const handleResizeEnd = useMemo(
    () =>
      // 设置 active 为 true
      () => {
        const timer = setTimeout(() => {
          setIsActive(true);
          updateImageData();
          clearTimeout(timer);
        }, 0);
      },
    [updateImageData]
  );
  const {
    imageContainerRef,
    imageWith,
    isDragging,
  } = useImageResizer({ isActive, handleResizeStart, handleResizeEnd });
  const handleClick = useCallback(() => {
    setIsActive(true);
  }, []);
  const style = useMemo(
    (): CSSProperties => ({
      position: 'absolute',
      zIndex: isActive ? 101 : 100,
      ...imagePosition,
    }),
    [imagePosition, isActive]
  );
  // 增加 delete 事件
  const deleteHandler = (e: KeyboardEvent<HTMLDivElement>) => {
    if (isActive && (e.key === 'Backspace' || e.key === 'Delete')) {
      // 删除图片
    }
  };
  useEffect(() => {
    const handler = (e: MouseEvent) => {
      // 点击的区域不在图片上
      if (!imageContainerRef.current?.contains(e.target as Node)) {
        setIsActive(false);
      }
    };
    window.addEventListener('mousedown', handler);
    return () => {
      window.removeEventListener('mousedown', handler);
    };
  }, [isActive, imageContainerRef]);
  return (
    <>
      {(
        <div
          className={'image-block-container'}
          style={style}
          onClick={handleClick}
          onKeyDown={deleteHandler}
          tabIndex={0}
        >
          <div ref={imageContainerRef} className="image-block">
            <img
              ref={imageRef}
              src={image}
              style={{ width: `${imageWith || width}px`, ...imageMaxSize }}
              alt=""
            />
            <div
              className={`image-block-mask ${isActive ? 'image-block-mask-active' : ''} ${isDragging ? 'image-block-mask-dragging' : ''
                }`}
            ></div>
          </div>
        </div>
      )}
    </>
  );
};

index.less

.image-block-container {
  display: flex;
  justify-content: center;
  align-items: center;
  .image-block {
    position: relative;
    display: flex;
    user-select: none;
    max-width: 100%;
    max-height: 100%;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    .image-block-mask {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    .image-block-mask-active {
      background: rgba(30, 111, 255, .12);
      cursor: move;
    }
    .image-block-mask-dragging::before {
      content: '';
      width: 10000px;
      height: 10000px;
      position: absolute;
      top: -5000px;
      left: -5000px;
      cursor: move;
    }
  }
}

到此这篇关于React实现图片缩放的示例代码的文章就介绍到这了,更多相关React图片缩放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React-native桥接Android原生开发详解

    React-native桥接Android原生开发详解

    本篇文章主要介绍了React-native桥接Android原生开发详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Reactjs 错误边界优雅处理方法demo

    Reactjs 错误边界优雅处理方法demo

    这篇文章主要为大家介绍了Reactjs 错误边界优雅处理方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • react函数组件类组件区别示例详解

    react函数组件类组件区别示例详解

    这篇文章主要为大家介绍了react函数组件类组件区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 浅谈React Native Flexbox布局(小结)

    浅谈React Native Flexbox布局(小结)

    这篇文章主要介绍了浅谈React Native Flexbox布局(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react使用mobx封装管理用户登录的store示例详解

    react使用mobx封装管理用户登录的store示例详解

    这篇文章主要介绍了react基于mobx封装管理用户登录的store,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 工程级 React 注册登录全栈级流程分析

    工程级 React 注册登录全栈级流程分析

    这篇文章主要介绍了工程级 React 注册登录全栈级流程,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • react中Hooks的理解和用法小结

    react中Hooks的理解和用法小结

    Hook是 React 16.8 的新增特性，它可以让你在不编写class的情况下使用state以及其他的React特性，这篇文章主要介绍了react中Hooks的理解和用法,需要的朋友可以参考下
    2023-05-05
  • 使用React SSR写Demo一学就会

    使用React SSR写Demo一学就会

    这篇文章主要为大家介绍了使用React SSR写Demo实现教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • React前端开发createElement源码解读

    React前端开发createElement源码解读

    这篇文章主要为大家介绍了React前端开发createElement源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • react源码层探究setState作用

    react源码层探究setState作用

    写react的时候，踩了几次坑发现setstate之后state不会立刻更新，于是判定setstate就是异步的方法，但是直到有一天，我想立刻拿到更新的state去传参另一个方法的时候，才问自己，为什么setstate是异步的？准确地说，在React内部机制能检测到的地方，setState就是异步的
    2022-10-10

最新评论