记录react 视频和 预览拖动

一、react 视频

##1、循环播放

import React, { useEffect, useState, useRef } from "react";
const videoRef= useRef(null);
const showVideoClass = { display: "block", width: "100%", height: "100%" }
const hindVideoClass = { display: "none", width: "100%", height: "100%" }

//布局中使用： 主要是 loop 
<video
       style={showVideoClass}
       src={require("../../../static/video/0.mp4")}
       muted
       loop
       autoPlay
       ref={videoRef}
 />

##2、两个视频交替播放

import React, { useEffect, useState, useRef } from "react";

const oneVideo = "/static/video/1.mp4";
const twoVideo ="/static/video/2.mp4";

function VideoPlay() {
    const [vidIndex, setVidIndex] = useState(0);
    const oneRef = useRef(null);
    const twoRef = useRef(null);

    useEffect(() => {
        console.log("当前index",vidIndex)
        if (vidIndex === 0 && oneRef.current) {
            oneRef.current.play();
        }

        if (vidIndex === 1 && twoRef.current) {
            twoRef.current.play();
        }
    }, [oneRef,twoRef, vidIndex]);
    return (
        <div className="videoShowDiv">
            <video
                style={{ display: vidIndex === 1 ? "none" : "block", width: "100%", height: "100%" }}
                src={oneVideo }
                muted
                onEnded={() => setVidIndex((idx) => idx + 1)}
                ref={oneRef}
            />
            <video
                style={{ display: vidIndex === 0 ? "none" : "block", width: "100%", height: "100%" }}
                src={twoVideo}
                muted
                onEnded={() => setVidIndex((idx) => idx -1)}
                ref={twoRef}
            />
        </div>
    );
}

export default VideoPlay

 ##3、选择播放

import React, { useEffect, useState, useRef } from "react";


function VideoPlay(props) {
    const { menuClickIndex } = props;
    const [vidIndex, setVidIndex] = useState(0);
    const oneRef = useRef(null);
    const twoRef = useRef(null);

    useEffect(() => {
        console.log("当前index", vidIndex)
        console.log("当前menuClickIndex", menuClickIndex)

        //menuClickIndex 为指定数，视频就指定播放那个视频
        if (menuClickIndex != undefined) {
            if (menuClickIndex == 0) {
                if (oneRef.current) {
                    oneRef.current.play();
                }
            }

            if (menuClickIndex == 1) {
                if (twoRef.current) {
                    twoRef.current.play();
                }
            }
        }

        //menuClickIndex 为空，视频就循环切换
        else {
            if (vidIndex === 0 && oneRef.current) {
                oneRef.current.play();
            }

            if (vidIndex === 1 && twoRef.current) {
                twoRef.current.play();
            }
        }

    }, [oneRef, twoRef, vidIndex]);

    const showVideoClass = { display: "block", width: "100%", height: "100%" }
    const hindVideoClass = { display: "none", width: "100%", height: "100%" }

    return (
        <div>
            {
                menuClickIndex == undefined &&

                <div className="videoShowDiv">

                    <video
                        style={{ display: vidIndex === 1 ? "none" : "block", width: "100%", height: "100%" }}
                        src={require("../../../static/video/one.mp4")}
                        muted
                        onEnded={() => setVidIndex((idx) => idx + 1)}
                        ref={oneRef}
                    />

                    <video
                        style={{ display: vidIndex === 0 ? "none" : "block", width: "100%", height: "100%" }}
                        src={require("../../../static/video/two.mp4")}
                        muted
                        onEnded={() => setVidIndex((idx) => idx - 1)}
                        ref={twoRef}
                    />
                </div>
            }

            {menuClickIndex == 0 &&
                <div className="videoShowDiv">
                    <video
                        style={showVideoClass}
                        src={require("../../../static/video/one.mp4")}
                        muted
                        loop
                        autoPlay
                        ref={oneRef}
                    />
                </div>
            }

            {menuClickIndex == 1 &&
                <div className="videoShowDiv">
                    <video
                        style={showVideoClass}
                        src={require("../../../static/video/two.mp4")}
                        muted
                        loop
                        autoPlay
                        ref={oneRef}
                    />
                </div>
            }
        </div>

    );
}

export default VideoPlay

 

overAndOutMenu = (index) => {
  
    this.setState({
      menuClickIndex: index
    })
}

//在布局中 
<div
     onMouseOver={() => {
         this.overAndOutMenu(0)
     }}
 >
                   菜单0
</div>
 

<div
     onMouseOver={() => {
         this.overAndOutMenu(1)
     }}
 >
                   菜单1
</div>

二、预览拖动 

transform的使用 ：CSS 变形(CSS3) transform_css transform_快乐de馒头的博客-CSDN博客

##1、缩放 

给图片 加  transform: scale(1.4)

onWheel={(e) => { if (isModelPreview) { handleWheelImage(e) } }} 

const handleWheelImage = (event) => {
    const bigger = event.deltaY > 0 ? -1 : 1;
    //向上为负，向下为正
    if (bigger > 0 && rate < 5) {
      const enlargeRate = rate + SCALE;
      setImgStyle({
        ...imgStyle,
        'transformOrigin': 'center',
        'transform': `scale( ${enlargeRate}) rotate(${oldRotate}deg)`
      });
      setRate(enlargeRate);
    } else if (bigger < 0 && rate > 1) {
      const shrinkRate = rate - SCALE;
      setImgStyle({
        ...imgStyle,
        'transformOrigin': 'center',
        'transform': `scale( ${shrinkRate}) rotate(${oldRotate}deg)`
      });
      setRate(shrinkRate);
    }
  }

加动画：

 

 ##2、旋转

给图片 加  transform: rotate(90deg)  90,180,270,360 为选择方向

const childHandleClickRotate = () => {

    if (rotate == 90) {
      setOldRotate(90)
      setRotate(90 * 2)
    }

    if (rotate == 180) {
      setOldRotate(180)
      setRotate(90 * 3)
    }

    if (rotate == 270) {
      setOldRotate(270)
      setRotate(90 * 4)
    }

    if (rotate == 360) {
      setOldRotate(360)
      setRotate(90)
    }

    setImgStyle({
      ...imgStyle,
      'transformOrigin': 'center',
      'transform': `scale(${rate}) rotate(${rotate}deg)`
    });
  }

 ##3、matrix 平移

给图片加 

transform: matrix(2.2, 0, 0, 2.2, -89, 186)

matrix(2.2, 0, 0, 2.2, -89, 186)的值 ，2,2为 缩放， -89 和 186 为移动的偏移位置

 拖动时，结合鼠标事件，结合matrix 做图片平移

onMouseDown={(e) => { if (isModelPreview) { handleMouseDown(e) } }}
onMouseMove={(e) => { if (isModelPreview) { handleMouseMove(e) } }}
onMouseUp={(e) => { if (isModelPreview) { handleMouseUp(e) } }}

 
const handleMouseDown = (event) => {
    event.preventDefault();
    event.stopPropagation();

    const { pageX, pageY } = event;
    setMouseDowmFlag(true); // 控制只有在鼠标按下后才会执行mousemove
    setMouseDowmPos({
      x: pageX,
      y: pageY,
    });
  }


  const handleMouseMove = (event) => {
    // console.log("获取的move对象：",event)
    event.preventDefault()
    event.stopPropagation()

    const { pageX, pageY } = event;
    const diffX = pageX - mouseDowmPos.x;
    const diffY = pageY - mouseDowmPos.y;
    if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return;
    const offsetX = parseInt(`${diffX}`);
    const offsetY = parseInt(`${diffY}`);
    
   //具体移动 偏移 x和y 可自行计算
    setImgStyle({
      ...imgStyle,
      'cursor': 'move',
      'transformOrigin': 'center',
      'transform': `matrix(${rate}, 0, 0, ${rate}, ${offsetX + matrixPos.x}, ${offsetY + matrixPos.y})  rotate(${oldRotate}deg)`
    });

    setMatrixPos({
      x: offsetX,
      y: offsetY,
    });

  }
  const handleMouseUp = (event) => {
    event.preventDefault();
    event.stopPropagation();

    setMouseDowmFlag(false);
  }

学习文章：react移动端svg等图片拖拽缩放 - 灰信网（软件开发博客聚合） (freesion.com)

 学习文章：https://www.saoniuhuo.com/question/detail-2609566.htmlreact图片缩放、平移（position、transform实现） - React那点事儿 - SegmentFault 思否