Question

我正在尝试在代码中的点周围获取HTML画布的一部分，并将其作为放大版本在画布中的75 x75矩形内重新显示。我知道缩放允许我放大但我不知道如何在这种情况下使用它。我在这个小提琴中附上了代码。任何帮助将不胜感激。

HTML

<canvas id="graph" height ="400" width="500"></canvas>

的jQuery

$(document).ready(function(){
var graph = $('#graph');
var l = graph[0].getContext('2d');

l.beginPath();
l.moveTo(50, 50);
l.lineTo(50, 350);
l.lineTo(450, 350);
l.stroke();

l.beginPath();
l.moveTo(100,250);
l.lineTo(450,200);
l.stroke();

l.beginPath();
l.rect(200, 225, 2, 2);
l.stroke();

l.rect(100, 75, 75, 75);
l.stroke();

});

Answer 1

我更新了你的小提琴，并包括两种不同的放大方式。一个重绘，会给你更好的分辨率。另一个对所选区域进行简单缩放，并导致模糊缩放。

http://jsfiddle.net/37bs7o3a/1/

$(document).ready(function(){
    var graph = $('#graph');
    var l = graph[0].getContext('2d');

    function draw(l) {
        l.beginPath();
        l.moveTo(50, 50);
        l.lineTo(50, 350);
        l.lineTo(450, 350);
        l.stroke();

        l.beginPath();
        l.moveTo(100,250);
        l.lineTo(450,200);
        l.stroke();

        l.beginPath();
        l.rect(200, 225, 2, 2);
        l.stroke();
    }

    draw(l);

    function redrawZoom(srcCtx, drawFn, x, y, scale, dx, dy, dw, dh) {
        var can = document.createElement('canvas');
        var ctx = can.getContext('2d');
        can.width = srcCtx.canvas.width;
        can.height = srcCtx.canvas.height;
        ctx.scale(scale, scale);
        ctx.translate(-x, -y);
        drawFn(ctx);

        // draw zoomed canvas on graph
        // sy, sy, sw, sh, dx, dy, dw, dh
        l.drawImage(can, 0, 0, dw, dh, dx, dy, dw, dh);

        // Draw zoom box
        l.strokeStyle = "rgba(0,0,255,.5)"
        l.rect(dx, dy, dw, dh);
        l.stroke();

        return can;
    }

    redrawZoom(l, draw, 190, 215, 3, 100, 75, 75, 75);

    function blurryZoom(ctx, x, y, w, h, scale, dx, dy) {

        // zoom outline
        ctx.beginPath();
        ctx.rect(190, 215, w, h);
        ctx.strokeStyle = "rgba(255,0,0,.5)"
        ctx.stroke();

        // zoom - Blurry Zoom
        l.drawImage(ctx.canvas,190,215,w,h,dx,dy,w*scale,h*scale);
    }

    blurryZoom(l, 190, 215, 25, 25, 3, 175, 75);

});

Answer 2

您可以将绘图命令移动到单独的功能，如：

var doWhatEver = function(l) {
    // Drawing commands come here...
}

然后，实现转换函数，如：

var clipAndZoomAndScale = function(whatToDo, l, zoomTo) {
  l.save(); // save context, because we change the 2d matrix
  // Creates a clipping rectangle
  l.rect(zoomTo.x, zoomTo.y, zoomTo.width, zoomTo.height);
  l.clip();      

  // translate to the box corner
  l.translate( zoomTo.x , zoomTo.y );
  // scale the drawing area
  l.scale(zoomTo.width/zoomTo.origWidth, zoomTo.height/zoomTo.origHeight);
  // and finally, center the box to the orinal
  l.translate( zoomTo.origWidth/2  - zoomTo.centerAtX,
               zoomTo.origHeight/2 - zoomTo.centerAtY );  

  // draw the custom drawings here...
  whatToDo(l);
  l.restore(); // restore context
}

然后使用它将绘图命令转换为矩形区域。转换绘图命令而不是仅仅复制像素的好处当然是你保持绘图的准确性，因为它一直是矢量。

var graph = $('#graph');
var l = graph[0].getContext('2d');

// first draw without the transformation
doWhatEver(l);

// Then draw with the scaled context
clipAndZoomAndScale(doWhatEver, l, {
    x : 100, y : 75,
    width : 75, height:75,
    centerAtX : 200, centerAtY : 225,
    origWidth : 500, origHeight : 400
});

请注意，在您的示例中，源宽高比500：400与目标框75:75宽高比不同，因此原始图像的副本将显示为失真。要解决此问题，请将origWidth设置为400。

http://jsfiddle.net/o60t2mhr/

Answer 3

我想你想要这样的东西？您可以使用drawImage。您基本上选择画布区域，目标X / Y和目标宽度/高度。

http://jsfiddle.net/37bs7o3a/2/

＆＃13;

$(document).ready(function(){
    var graph = $('#graph');
    var l = graph[0].getContext('2d');
    
    l.beginPath();
    l.moveTo(50, 50);
    l.lineTo(50, 350);
    l.lineTo(450, 350);
    l.stroke();
    
    l.beginPath();
    l.moveTo(100,250);
    l.lineTo(450,200);
    l.stroke();
    
    l.beginPath();
    l.rect(200, 225, 2, 2);
    l.stroke();
    
    l.rect(100, 75, 75, 75);
    l.stroke();
    
    l.drawImage(
        graph[0], // Canvas
        180, // sourceX
        205, // sourceY
        40, // sourceW
        40, // sourceH
        
        100, // destX
        75, // destY
        75, // destW
        75 // destH
    );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="graph" height ="400" width="500"></canvas>

＆＃13;

在画布中创建画布的一部分的放大图像

3 个答案: