如何更改 React DnD 预览图像的大小？答案

【问题标题】：How do I change the size of a React DnD Preview Image?如何更改 React DnD 预览图像的大小？
【发布时间】：2021-04-16 18:06:00
【问题描述】：

我正在制作一个国际象棋游戏，并且我正在使用 React Drag n Drop 进行棋子移动。我有一个问题，拖动图像不随窗口大小缩放。图像保持在静态 60x60 像素（与我从静态文件夹提供给客户端的图像相同）。

这是问题的 gif，您可以看到： Drag image not scaling with original image

这是“Piece”组件的代码sn-p：

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

// React DnD Imports 
import { useDrag, DragPreviewImage, DragLayer } from "react-dnd";

function Piece({ piece }) {
    const { imageFile } = piece;

    // drag and drop configuration
    const [{ isDragging }, drag, preview] = useDrag({
        item: { type: "piece", piece: piece },
        collect: (monitor) => {
            return { isDragging: !!monitor.isDragging() };
        },
    });

    const opacityStyle = {
        opacity: isDragging ? 0.5 : 1,
    };

    return (
        <React.Fragment>
            <DragPreviewImage connect={preview} src={imageFile} />
            <img style={{ ...opacityStyle }} ref={drag} src={imageFile}></img>
        </React.Fragment>
    );
}

我尝试了以下方法，但效果并不完全正确：

    useEffect(() => {
        const img = new Image();
        img.src = imageFile;
        const ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = "100%";
        ctx.canvas.height = "100%";

        img.onload = () => {
            ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
            img.src = ctx.canvas.toDataURL();
            preview(img);
        };
    }, []);

拖动图像是透明的
如果在 UseEffect 调用之间开始拖动，则开始拖动图像后面的整个图块

我真的很想用一种方法轻松告诉我的 DragPreviewImage 与原始图像一起缩放...谢谢！

编辑：我发现了 previewOptions 属性！通过这样做，我让我的预览图像以拖动为中心，但我无法增加它的大小。代码如下：

function Piece({ piece }) {
    const { imageFile } = piece;

    const previewOptions = {
        offsetX: 27,
        offsetY: 28,
    };

    // drag and drop configuration
    const [{ isDragging }, drag, preview] = useDrag({
        item: { type: "piece", piece: piece },
        previewOptions,
        collect: (monitor) => {
            return { isDragging: !!monitor.isDragging() };
        },
    });

    const img = new Image();
    img.src = imageFile;
    preview(img, previewOptions);

    const callbackRef = useCallback(
        (node) => {
            drag(node);
            preview(node, previewOptions);
        },
        [drag, preview],
    );

    const opacityStyle = {
        opacity: isDragging ? 0.5 : 1,
    };

    return (
        <React.Fragment>
            <DragPreviewImage connect={preview} src={imageFile} />
            <img style={{ ...opacityStyle }} ref={drag} src={imageFile} />
        </React.Fragment>
    );
}

【问题讨论】：

如果不改变不透明度并保持1，它的尺寸还会缩小吗？
是的，如果没有不透明样式，它仍然会缩小。

标签： reactjs dom react-hooks drag-and-drop react-dnd

【解决方案1】：

我查看了 react-dnd 的文档，发现要使预览图像达到您想要的大小的唯一方法是编辑源图像本身。在我的例子中，图像是 500x500，而板子是 75x75，所以通过在 Photoshop/GIMP 中缩小图像，它得到了我想要的大小。但是，如果您希望它响应，我不知道。我尝试将 style={{height: , width: }} 添加到 DraggablePreview 但没有效果，尝试使用 scale() 也没有效果。但是，如果您拥有的棋盘是静态的（宽度和高度），则最好编辑图像。

【讨论】：