Question

我想在另一个画布元素中显示一个画布元素的片段。为了说明，我具有以下结构：

画布元素，它被图像填充为背景。在此图像上方，我绘制了一个箭头和一条可能的路径。背景图像确实很大，这意味着我不能从这张大图像中获得太多信息。这就是第二点的原因。
我想显示画布元素1的一部分。例如，如下图所示：

目前，我在画布元素1中获得了红色箭头的坐标，现在我想对这一部分进行裁切，如图像中的偏移量。

我该如何使用JavaScript / JQuery解决类似问题。总之，我有两个画布元素。其中之一是显示一个带有红色箭头的大地图，该地图代表当前位置（这已经起作用了），但是现在我想显示第二个画布元素，该部分的缩放与红色箭头所在的位置相同。目前，我正在获取坐标，但不知道如何将其“缩放”为画布元素。

就像一些当前答案所说，我提供一些代码：

我的HTML代码中，有mainCanvasMap，它具有背景图像，还有zoomCanvas，应显示mainCanvasMap的一部分！
这是一个JavaScript代码段，它在地图上呈现红色箭头，并应为zoomCanvas元素提供缩放功能（红色箭头所在的位置）。

var canvas = {}
canvas.canvas = null;
canvas.ctx = null;
canvas.scale = 0;


var zoomCanvas = {}
zoomCanvas.canvas = null;
zoomCanvas.ctx = null;
zoomCanvas.scale = 0;

    $(document).ready(function () {


        canvas.canvas = document.getElementById('mainCanvasMap');
        canvas.ctx = canvas.canvas.getContext('2d');


        zoomCanvas.canvas = document.getElementById('zoomCanvas');
        zoomCanvas.ctx = zoomCanvas.canvas.getContext('2d');
        
        setInterval(requestTheArrowPosition, 1000);
     });
     
     function requestTheArrowPosition() {
            renderArrowOnMainCanvasElement();
            renderZoomCanvas();
    }

    function renderArrowOnMainCanvasElement(){
          //ADD ARROW TO MAP AND RENDER THEM
    }

    function renderZoomCanvas() {

        //TRY TO ADD THE ZOOM FUNCTION, I WOULD LIKE TO COPY A SECTION OF THE MAINCANVASMAP
        zoomCanvas.ctx.fillRect(0, 0, zoomCanvas.canvas.width, zoomCanvas.canvas.height);
        zoomCanvas.ctx.drawImage(canvas.canvas, 50, 100, 200, 100, 0, 0, 400, 200);
        zoomCanvas.canvas.style.top = 100 + 10 + "px"
        zoomCanvas.canvas.style.left = 100 + 10 + "px"
        zoomCanvas.canvas.style.display = "block";

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    <!--MY MAIN CANVAS ELEMENT, WHICH HAS A BACKGROUND IMAGE AND WHERE THE ARROW IS RENDEREED-->
    <canvas id="mainCanvasMap" style="width:100%; height:100%; background: url('https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg') 0% 0% / 100% 100%;"></canvas>


    <!-- MY ZOOM CANVAS ELEMENT, SHOULD SHOW A CUTTING OF THE MAINCANVASMAP -->
    <canvas id="zoomCanvas" style="height:100%;width:100%"></canvas>

该代码只是一个伪代码，但它显示了我喜欢做什么。

Answer 1

您的代码将css用于画布图像，但并不总是像我们认为的那样...
我建议您从头开始绘制所有内容，这是一个起点：

canvas = document.getElementById('mainCanvasMap');
ctx = canvas.getContext('2d');

zoomCanvas = document.getElementById('zoomCanvas');
zoomCtx = zoomCanvas.getContext('2d');
var pos = {x:0, y:40}

image = document.getElementById('source');
image.onload = draw;

function draw() {
  ctx.drawImage(image,0,0);
  setInterval(drawZoom, 80);  
}

function drawZoom() {
  // simple animation on the x axis
  x = Math.sin(pos.x++/10 % (Math.PI*2)) * 20 + 80 
  zoomCtx.drawImage(image, x, pos.y, 200, 100, 0, 0, 400, 200);
}

<canvas id="mainCanvasMap"></canvas>
<canvas id="zoomCanvas"></canvas>

<img id="source" src="https://image.jimcdn.com/app/cms/image/transf/dimension=624x10000:format=jpg/path/s7d1eecaa5cee1012/image/i4484f962de0bf3c2/version/1543751018/image.jpg" style="display:none">

放大html画布

1 个答案: