Question

我正在尝试将图像加载到画布中，但是drawImage函数无法按预期工作。

我添加了拖动功能，当我在画布内移动img时，它不是线性的，也不会降低鼠标光标的作用。

这是我的HTML

<html>

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
    <div class="row" id="canvasContainer"> </div>
</div>
    <script src="./main.js"></script>
</body>
</html>

此处

for (let i = 0; i < 4; i++) {
    var canvas = $('<canvas/>', { width: 400, height: 400, 'class': 'can' + i });
    var context = canvas[0].getContext('2d');
    let img = make_base(context, 'https://via.placeholder.com/600/92c952');
    $("#canvasContainer").append(canvas);
    addEvent(canvas[0], img)

}


function make_base(context, url) {
    console.log(url)
    base_image = new Image();
    base_image.src = url;
    base_image.onload = function () {
        context.drawImage(this, 0, 0, this.width, this.height, 10, 10, 100, 100);
    }

    return base_image;
}


function addEvent(canvas, img) {
    var ctx = canvas.getContext("2d");
    var canvasWidth;
    var canvasHeight;
    var isDragging = false;
    var offsetX;
    var offsetY;

    function handleMouseDown(e) {
        setOffset(e, 1);
        isDragging = true;
    }

    function handleMouseUp(e) {
        isDragging = false;
    }

    function handleMouseOut(e) {
        isDragging = false;
    }

    function handleMouseMove(e) {
        if (isDragging) {
            // setOffset(e, 3);
            canMouseX = parseInt(e.clientX - offsetX);
            canMouseY = parseInt(e.clientY - offsetY);
            console.log(e.clientX, offsetX, e.clientX - offsetX)
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            //ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2);

            ctx.drawImage(img, 0, 0, img.width, img.height, canMouseX / 2, canMouseY / 2, 100, 100);

        }
    }

    function setOffset(e, n) {
        canvasWidth = $(e.target).width();
        canvasHeight = $(e.target).height();

        canvasOffset = $(e.target).offset();
        offsetX = canvasOffset.left;
        offsetY = canvasOffset.top;

    }
    $(canvas).mousedown(function (e) { handleMouseDown(e); });
    $(canvas).mousemove(function (e) { handleMouseMove(e); });
    $(canvas).mouseup(function (e) { handleMouseUp(e); });
    $(canvas).mouseout(function (e) { handleMouseOut(e); });

}

Answer 1

我已经更改了创建画布的循环。

for (let i = 0; i < 4; i++) {
    let canvas = document.createElement("canvas")
    canvas.width=400, canvas.height=400;
    canvas.setAttribute('class', 'can' + i );
    let context = canvas.getContext('2d');
    let img = make_base(context, 'https://via.placeholder.com/600/92c952');
    $("#canvasContainer").append(canvas);
    addEvent(canvas, img)

}


function make_base(context, url) {
    base_image = new Image();
    base_image.src = url;
    base_image.onload = function () {
        context.drawImage(this, 0, 0, this.width, this.height, 10, 10, 100, 100);
    }

    return base_image;
}


function addEvent(canvas, img) {
    var ctx = canvas.getContext("2d");
    var canvasWidth;
    var canvasHeight;
    var isDragging = false;
    var offsetX;
    var offsetY;

    function handleMouseDown(e) {
        setOffset(e, 1);
        isDragging = true;
    }

    function handleMouseUp(e) {
        isDragging = false;
    }

    function handleMouseOut(e) {
        isDragging = false;
    }

    function handleMouseMove(e) {
        if (isDragging) {
            // setOffset(e, 3);
            canMouseX = parseInt(e.clientX - offsetX);
            canMouseY = parseInt(e.clientY - offsetY);
            console.log(e.clientX, offsetX, e.clientX - offsetX)
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
            //ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2);

            ctx.drawImage(img, 0, 0, img.width, img.height, canMouseX / 2, canMouseY / 2, 100, 100);

        }
    }

    function setOffset(e, n) {
        canvasWidth = $(e.target).width();
        canvasHeight = $(e.target).height();

        canvasOffset = $(e.target).offset();
        offsetX = canvasOffset.left;
        offsetY = canvasOffset.top;

    }
    $(canvas).mousedown(function (e) { handleMouseDown(e); });
    $(canvas).mousemove(function (e) { handleMouseMove(e); });
    $(canvas).mouseup(function (e) { handleMouseUp(e); });
    $(canvas).mouseout(function (e) { handleMouseOut(e); });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row" id="canvasContainer"> </div>
</div>

Answer 2

请阅读CanvasRenderingContext2D.drawImage() on MDN

尝试同时使用dWidth和dHeight。

这给了我测试中正确的渲染框：

context.drawImage(this, 0, 0, this.width, this.height, 10, 10, this.width /2, this.height/4);

canvas drawImage没有按照给定的大小渲染img

2 个答案: