javascript - react-konva 如何实现 根据以鼠标为中心缩放图片?

Question

原生canvas 可以实现 ,但是用的 konva 库, 不知道怎么做了就

需求是 需要想百度地图 高德地图哪种类似的 以所选区域为中心缩放
https://codesandbox.io/s/affectionate-resonance-2f7lhn?file=/...

import { useEffect, useRef, useState } from "react"import { useSelector } from "react-redux"import { Stage, Layer, Group, Image } from "react-konva"import { vec2 } from "gl-matrix"import styled from "styled-components"import Konva from "konva"import useImage from "use-image" import type { KonvaEventObject } from "konva/lib/Node"import type { RootState } from "@/stores"const ScStage = styled(Stage)`    width: 100%;    height: calc(100% - 100px);    overflow: hidden;`const StageContainer2 = () => {    const { imgUrl } = useSelector((state: RootState) => state.measure)    const { cursor } = useSelector((state: RootState) => state.cursor)    const { lateral } = useSelector((state: RootState) => state.showPoint)    const { rotate, scaleX, contrast, brightness } = useSelector((state: RootState) => state.transform)    const [scale, setScale] = useState(1)    const [width, setWidth] = useState(1000)    const [height, setHeight] = useState(1000)    const [image] = useImage(imgUrl)    const stageRef = useRef<Konva.Stage | null>(null)    const layerRef = useRef<Konva.Layer | null>(null)    const imageRef = useRef(null)    const [offsetX, setOffsetX] = useState(0)    const [offsetY, setOffsetY] = useState(0)    const max = 4   // 放大最大的比例    const min = 0.5 // 缩小最小的比例    const step = 0.03 // 每次缩放的比例    function onWheel(e: KonvaEventObject<WheelEvent>) {        const x = e.evt.offsetX        const y = e.evt.offsetY        const offsetX = (x - layerRef.current.offsetX()) * layerRef.current.scaleX() / (layerRef.current.scaleX() - step) - (x - layerRef.current.offsetX())        const offsetY = (y - layerRef.current.offsetY()) * layerRef.current.scaleY() / (layerRef.current.scaleY() - step) - (y - layerRef.current.offsetY())// 这里写的不是很对        if (e.evt.wheelDelta && e.evt.wheelDelta > 0) {            // 放大            if (layerRef.current.scaleX() < max && layerRef.current.scaleY() < max) {                layerRef.current.scaleX(layerRef.current.scaleX() + step)                layerRef.current.scaleY(layerRef.current.scaleY() + step)                layerRef.current.move({ x: -offsetX, y: -offsetY }) // 跟随鼠标偏移位置            }        } else {            // 缩小            if (layerRef.current.scaleX() > min && layerRef.current.scaleY() > min) {                layerRef.current.scaleX(layerRef.current.scaleX() - step)                layerRef.current.scaleY(layerRef.current.scaleY() - step)                layerRef.current.move({ x: offsetX, y: offsetY }) // 跟随鼠标偏移位置            }        }        // const stage = e.target.getStage()        // const mousePos = stage?.getPointerPosition()!        //        // const imagePos = imageRef.current?.position()!    }    useEffect(() => {        const stage = stageRef.current?.getStage()        const stageWrapper = stageRef.current!.attrs.container        setStageSize()        function setStageSize() {            stage?.width(stageWrapper.clientWidth)            stage?.height(stageWrapper.clientHeight)            setWidth(stageWrapper.clientWidth)            setHeight(stageWrapper.clientHeight)        }    }, [stageRef])    return (        <>            <ScStage ref={stageRef} style={{ cursor }} onWheel={onWheel}>                <Layer ref={layerRef} scaleX={scaleX} rotation={rotate} x={width / 2} y={height / 2}>                    <Group draggable                           scale={{ x: scale, y: scale }}                           offset={{ x: image?.width! / 2, y: image?.height! / 2 }}                    >                        {lateral && (                            <Image                                ref={imageRef}                                image={image}                                filters={[Konva.Filters.Brighten, Konva.Filters.Contrast]}                                contrast={contrast}                                brightness={brightness}                            />                        )}                     </Group>                </Layer>            </ScStage>        </>    )}export default StageContainer2

Answer 1

解决这个问题，首先要逆变换求出鼠标点击的位置在变换前的位置，然后将这个位置作为新的变换坐标系原点（原点在线性变换中是不动点，利用这个性质，就可以做出跟随鼠标的效果）。
如果图形已经发生过变换，修改原点会导致“跃变”效果，也就是在鼠标开始动的瞬间图形会跑掉（把setPosition去掉就可以重现这种现象）。因此需要对“跃变”的副作用进行修正，也就是在修改原点的同时，把图像“拽”回原位置。

  const [scale, setScale] = useState(2);  const [offset, setOffset] = useState({    x: 80,    y: 80,  });  const [position, setPosition] = useState({ x: 0, y: 0 });  const wheelCallback = useCallback(    ({      //@ts-ignore      evt: { layerX, layerY, deltaY },    }: Konva.KonvaEventObject<WheelEvent>) => {      if (!shapeRef.current) return;      const currentTransform = shapeRef.current.getTransform();      const currentTransformMatrix = [...currentTransform.getMatrix()];      const { x, y, offsetX, offsetY } = shapeRef.current.attrs;      // 当前的变换坐标原点为 [offsetX, offsetY], 为不变点      // 鼠标点击的位置      const currentViewCursorInLayer = {        x: layerX,        y: layerY,      };      // 当前变换矩阵求逆，以便还原鼠标位置在变换前的真实位置      const currentTransformInvert = currentTransform.copy().invert();      // 逆变换求鼠标位置变换前的位置，所以是 Actual ，该位置将作为新的变换原点      // 该位置实际上是在以 [x, y] 为原点的坐标系中表达的，所以是 InShape      const currentActualCursorInShape = currentTransformInvert.point(        currentViewCursorInLayer      );      // 其实赋值前后是完全等效的，这里为了避免困惑，故重命名      const nextOffset = {        x: currentActualCursorInShape.x,        y: currentActualCursorInShape.y,      };      // 修改原点      setOffset(nextOffset);      // 跟随滚轮缩放      if (deltaY < 0) {        setScale(scale + 0.1);      } else if (scale > 0.1) {        setScale(scale - 0.1);      } else {        setScale(0.1);      }      // 原点位置变更，变更的矢量由旧原点指向新原点，直接移动一下好了      const nextMatrix = [...currentTransformMatrix];      const nextTransform = new Konva.Transform(nextMatrix).translate(        -(nextOffset.x - offsetX),        -(nextOffset.y - offsetY)      );      // 修改原点，会导致位置突变，需要计算突变发生后，鼠标相对于图像的位置会被移动到何处      // 变换只是视觉效果，所以是 View      const nextViewCursorInLayer = nextTransform.point(nextOffset);      // 鼠标位置在两次变化间的移动矢量      const cursorMoveVector = {        x: layerX - nextViewCursorInLayer.x,        y: layerY - nextViewCursorInLayer.y,      };      // 使用前述移动矢量，修正位置      setPosition({        x: x + cursorMoveVector.x,        y: y + cursorMoveVector.y      });    },    [scale, shapeRef]  );      return <Stage width={800} height={800}>        <Layer>          <Group            scale={{ x: scale, y: scale }}            onDragEnd={dragCallback}            onWheel={wheelCallback}            position={position}            offset={offset}            ref={shapeRef}            draggable          >            <Rect              width={160}              height={160}              strokeWidth={1}              stroke="blue"              fill={"red"}            />          </Group>        </Layer>      </Stage>

��这里用的 Rect ，方便测试，Image 差别应该不大。

以上代码在单层未变换 Layer 中测试可用，但没有测试过复杂的复合变换，注意shapeRef要作为Group的属性，而非Image。