Inhaltsverzeichnis

Bildlupe

Effekte

Online-Demonstrations-Quellcode

Prinzip

W?hlen Sie zuerst einen Bereich des Bildes aus, vergr??ern Sie dann diesen Bereich und zeichnen Sie ihn dann auf das Originalbild, um sicherzustellen, dass die Mittelpunkte der beiden Bereiche wie gezeigt konsistent sind in der folgenden Abbildung:

Initialisieren

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

<img  src="/static/imghw/default1.png"  data-src="image.png"  class="lazy"     style="max-width:90%" id="img" alt="【HTML5】Canvas implementiert einen Lupeneffekt" >

, um die Leinwand- und Bildobjekte zu erhalten. Verwenden Sie hier das Tag , um Bilder vorab zu laden Das Vorladen von Bildern k?nnen Sie hier sehen

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("img");

Zugeh?rige Variablen festlegen

// 圖片被放大區(qū)域的中心點，也是放大鏡的中心點
var centerPoint = {};
// 圖片被放大區(qū)域的半徑
var originalRadius = 100;
// 圖片被放大區(qū)域
var originalRectangle = {};
// 放大倍數(shù)
var scale = 2;
// 放大后區(qū)域
var scaleGlassRectangle

Ein Hintergrundbild zeichnen

function drawBackGround() {
    context.drawImage(img, 0, 0);
}

Berechnen Sie den Bereich des Bereichs, in dem sich das Bild befindet vergr??ert

Hier verwenden wir die Position der Maus als zu vergr??ernden Bereich. Der Mittelpunkt des Bereichs (die Lupe bewegt sich mit der Mausbewegung), da die Leinwand die Koordinaten der oberen linken Ecke kennen muss und die Breite und H?he des Bereichs beim Zeichnen eines Bildes, daher berechnen wir hier den Bereich des Bereichs

function calOriginalRectangle(point) {
    originalRectangle.x = point.x - originalRadius;
    originalRectangle.y = point.y - originalRadius;
    originalRectangle.width = originalRadius * 2;
    originalRectangle.height = originalRadius * 2;}

Zeichnen Sie den Vergr??erungsglasbereich

Zuschneidebereich

Die Lupe ist im Allgemeinen kreisf?rmig. Hier verwenden wir die Clip-Funktion, um einen kreisf?rmigen Bereich zuzuschneiden und dann das vergr??erte Bild in diesen Bereich zu zeichnen. Sobald ein bestimmter Bereich abgeschnitten ist, werden alle zukünftigen Zeichnungen auf diesen Bereich beschr?nkt. Hier verwenden wir die Methoden zum Speichern und Wiederherstellen, um die Auswirkungen des abgeschnittenen Bereichs zu l?schen. save speichert den aktuellen Canvas-Status, einschlie?lich der Kontextattribute des Canvas, wie Stil, Linienbreite usw., und verschiebt diesen Status dann in einen Stapel. ?restore“ wird verwendet, um den Status des letzten Speichervorgangs wiederherzustellen und den obersten Status vom Stapel zu entfernen.

context.save();
context.beginPath();
context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
context.clip();
......
context.restore();

Berechnen Sie den Vergr??erungsglasbereich

Erhalten Sie die Koordinaten der oberen linken Ecke des Bereichs sowie die Breite und H?he des Bereichs durch den Mittelpunkt, die Breite und H?he des vergr??erten Bereich und den Vergr??erungsfaktor.

scaleGlassRectangle = {
    x: centerPoint.x - originalRectangle.width * scale / 2,
    y: centerPoint.y - originalRectangle.height * scale / 2,
    width: originalRectangle.width * scale,
    height: originalRectangle.height * scale}

Zeichnen Sie ein Bild

Hier verwenden wir die Methode context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); sich selbst als Bild, nehmen Sie dann das Bild des vergr??erten Bereichs auf und zeichnen Sie es in den Vergr??erungsglasbereich.

context.drawImage(canvas,
    originalRectangle.x, originalRectangle.y,
    originalRectangle.width, originalRectangle.height,
    scaleGlassRectangle.x, scaleGlassRectangle.y,
    scaleGlassRectangle.width, scaleGlassRectangle.height);

Zeichnen Sie die vergr??erte Kante

createRadialGradient wird zum Zeichnen von Verlaufsbildern verwendet

context.beginPath();
var gradient = context.createRadialGradient(
    centerPoint.x, centerPoint.y, originalRadius - 5,
    centerPoint.x, centerPoint.y, originalRadius);
gradient.addColorStop(0, 'rgba(0,0,0,0.2)');
gradient.addColorStop(0.80, 'silver');
gradient.addColorStop(0.90, 'silver');
gradient.addColorStop(1.0, 'rgba(150,150,150,0.9)');

context.strokeStyle = gradient;
context.lineWidth = 5;
context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
context.stroke();

Mausereignisse hinzufügen

Mausbewegungsereignisse zur Leinwand hinzufügen

canvas.onmousemove = function (e) {
    ......
}

Koordinaten umwandeln

Die durch Mausereignisse erhaltenen Koordinaten sind im Allgemeinen Bildschirm- oder Fensterkoordinaten, und wir müssen sie in Leinwandkoordinaten umwandeln. getBoundingClientRect wird verwendet, um die linke, obere, rechte und untere Position eines Elements auf der Seite relativ zum Browserfenster zu ermitteln.

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {x: x - bbox.left, y: y - bbox.top}}

Mausstil ?ndern

我們可以通過 css 來修改鼠標樣式

#canvas {
    display: block;
    border: 1px solid red;
    margin: 0 auto;
    cursor: crosshair;}

圖表放大鏡

我們可能基于 canvas 繪制一些圖表或者圖像，如果兩個元素的坐標離得比較近，就會給元素的選擇帶來一些影響，例如我們畫兩條線，一個線的坐標是(200.5, 400) -> (200.5, 200)，另一個線的坐標為 (201.5, 400) -> (201.5, 20)，那么這兩條線幾乎就會重疊在一起，如下圖所示：

使用圖表放大鏡的效果

在線演示 源碼

原理

類似于地圖中的圖例，放大鏡使用較為精確的圖例，如下圖所示：

在放大鏡坐標系統(tǒng)中，原始的區(qū)域會變大，如下圖所示

繪制原始線段

首先創(chuàng)建一個線段對象

function Line(xStart, yStart, xEnd, yEnd, index, color) {
    // 起點x坐標
    this.xStart = xStart;
    // 起點y坐標
    this.yStart = yStart;
    // 終點x坐標
    this.xEnd = xEnd;
    // 終點y坐標
    this.yEnd = yEnd;
    // 用來標記是哪條線段
    this.index = index;
    // 線段顏色
    this.color = color;}

初始化線段

// 原始線段var chartLines = new Array();// 處于放大鏡中的原始線段var glassLines;// 放大后的線段var scaleGlassLines;// 位于放大鏡中的線段數(shù)量var glassLineSize;function initLines() {

    var line;
    line = new Line(200.5, 400, 200.5, 200, 0, "#888");
    chartLines.push(line);
    line = new Line(201.5, 400, 201.5, 20, 1, "#888");
    chartLines.push(line);


    glassLineSize = chartLines.length;
    glassLines = new Array(glassLineSize);
    for (var i = 0; i < glassLineSize; i++) {
        line = new Line(0, 0, 0, 0, i);
        glassLines[i] = line;
    }

    scaleGlassLines = new Array(glassLineSize);
    for (var i = 0; i < glassLineSize; i++) {
        line = new Line(0, 0, 0, 0, i);
        scaleGlassLines[i] = line;
    }}

繪制線段

function drawLines() {
    var line;
    context.lineWidth = 1;

    for (var i = 0; i < chartLines.length; i++) {
        line = chartLines[i];
        context.beginPath();
        context.strokeStyle = line.color;
        context.moveTo(line.xStart, line.yStart);
        context.lineTo(line.xEnd, line.yEnd);
        context.stroke();
    }}

計算原始區(qū)域和放大鏡區(qū)域

function calGlassRectangle(point) {
    originalRectangle.x = point.x - originalRadius;
    originalRectangle.y = point.y - originalRadius;
    originalRectangle.width = originalRadius * 2;
    originalRectangle.height = originalRadius * 2;

    scaleGlassRectangle.width = originalRectangle.width * scale;
    scaleGlassRectangle.height = originalRectangle.height * scale;
    scaleGlassRectangle.x = originalRectangle.x + originalRectangle.width / 2 - scaleGlassRectangle.width / 2;
    scaleGlassRectangle.y = originalRectangle.y + originalRectangle.height / 2 - scaleGlassRectangle.height / 2;

    // 將值裝換為整數(shù)
    scaleGlassRectangle.width = parseInt(scaleGlassRectangle.width);
    scaleGlassRectangle.height = parseInt(scaleGlassRectangle.height);
    scaleGlassRectangle.x = parseInt(scaleGlassRectangle.x);
    scaleGlassRectangle.y = parseInt(scaleGlassRectangle.y);}

計算線段在新坐標系統(tǒng)的位置

由原理圖我們知道，放大鏡中使用坐標系的圖例要比原始坐標系更加精確，比如原始坐標系使用 1:100，那么放大鏡坐標系使用 1:10，因此我們需要重新計算線段在放大鏡坐標系中的位置。同時為了簡便，我們將線段的原始坐標進行了轉(zhuǎn)化，減去原始區(qū)域起始的x值和y值，即將原始區(qū)域左上角的點看做為(0,0)。

function calScaleLines() {
    var xStart = originalRectangle.x;
    var xEnd = originalRectangle.x + originalRectangle.width;
    var yStart = originalRectangle.y;
    var yEnd = originalRectangle.y + originalRectangle.height;
    var line, gLine, sgLine;
    var glassLineIndex = 0;
    for (var i = 0; i < chartLines.length; i++) {
        line = chartLines[i];

        // 判斷線段是否在放大鏡中
        if (line.xStart < xStart || line.xEnd > xEnd) {
            continue;
        }
        if (line.yEnd > yEnd || line.yStart < yStart) {
            continue;
        }

        gLine = glassLines[glassLineIndex];
        sgLine = scaleGlassLines[glassLineIndex];
        if (line.yEnd > yEnd) {
            gLine.yEnd = yEnd;
        }
        if (line.yStart < yStart) {
            gLine.yStart = yStart;
        }

        gLine.xStart = line.xStart - xStart;
        gLine.yStart = line.yStart - yStart;
        gLine.xEnd = line.xEnd - xStart;
        gLine.yEnd = line.yEnd - yStart;

        sgLine.xStart = parseInt(gLine.xStart * scale);
        sgLine.yStart = parseInt(gLine.yStart * scale);
        sgLine.xEnd = parseInt(gLine.xEnd * scale);
        sgLine.yEnd = parseInt(gLine.yEnd * scale);
        sgLine.color = line.color;
        glassLineIndex++;
    }
    glassLineSize = glassLineIndex;}

繪制放大鏡中心點

繪制放大鏡中心的瞄準器

function drawAnchor() {
    context.beginPath();
    context.lineWidth = 2;
    context.fillStyle = "#fff";
    context.strokeStyle = "#000";
    context.arc(parseInt(centerPoint.x), parseInt(centerPoint.y), 10, 0, Math.PI * 2, false);

    var radius = 15;
    context.moveTo(parseInt(centerPoint.x - radius), parseInt(centerPoint.y));
    context.lineTo(parseInt(centerPoint.x + radius), parseInt(centerPoint.y));
    context.moveTo(parseInt(centerPoint.x), parseInt(centerPoint.y - radius));
    context.lineTo(parseInt(centerPoint.x), parseInt(centerPoint.y + radius));
    //context.fill();
    context.stroke();}

繪制放大鏡

function drawMagnifyingGlass() {

    calScaleLines();

    context.save();
    context.beginPath();
    context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
    context.clip();

    context.beginPath();
    context.fillStyle = "#fff";
    context.arc(centerPoint.x, centerPoint.y, originalRadius, 0, Math.PI * 2, false);
    context.fill();

    context.lineWidth = 4;
    for (var i = 0; i < glassLineSize; i++) {
        context.beginPath();
        context.strokeStyle = scaleGlassLines[i].color;
        context.moveTo(scaleGlassRectangle.x + scaleGlassLines[i].xStart, scaleGlassRectangle.y + scaleGlassLines[i].yStart);
        context.lineTo(scaleGlassRectangle.x + scaleGlassLines[i].xEnd, scaleGlassRectangle.y + scaleGlassLines[i].yEnd);
        context.stroke();
    }
    context.restore();

    context.beginPath();
    var gradient = context.createRadialGradient(        parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius - 5,
        parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius);

    gradient.addColorStop(0.50, &#39;silver&#39;);
    gradient.addColorStop(0.90, &#39;silver&#39;);
    gradient.addColorStop(1, &#39;black&#39;);
    context.strokeStyle = gradient;
    context.lineWidth = 5;
    context.arc(parseInt(centerPoint.x), parseInt(centerPoint.y), originalRadius, 0, Math.PI * 2, false);
    context.stroke();

    drawAnchor();}

添加事件

鼠標拖動

鼠標移動到放大鏡上，然后按下鼠標左鍵，可以拖動放大鏡，不按鼠標左鍵或者不在放大鏡區(qū)域都不可以拖動放大鏡。
為了實現(xiàn)上面的效果，我們要實現(xiàn)3種事件 mousedown, mousemove, 'mouseup', 當(dāng)鼠標按下時，檢測是否在放大鏡區(qū)域，如果在，設(shè)置放大鏡可以移動。鼠標移動時更新放大鏡中興點的坐標。鼠標松開時，設(shè)置放大鏡不可以被移動。

canvas.onmousedown = function (e) {
    var point = windowToCanvas(e.clientX, e.clientY);
    var x1, x2, y1, y2, dis;

    x1 = point.x;
    y1 = point.y;
    x2 = centerPoint.x;
    y2 = centerPoint.y;
    dis = Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2);
    if (dis < Math.pow(originalRadius, 2)) {
        lastPoint.x = point.x;
        lastPoint.y = point.y;
        moveGlass = true;
    }}canvas.onmousemove = function (e) {
    if (moveGlass) {
        var xDis, yDis;
        var point = windowToCanvas(e.clientX, e.clientY);
        xDis = point.x - lastPoint.x;
        yDis = point.y - lastPoint.y;
        centerPoint.x += xDis;
        centerPoint.y += yDis;
        lastPoint.x = point.x;
        lastPoint.y = point.y;
        draw();
    }}canvas.onmouseup = function (e) {
    moveGlass = false;}

鼠標雙擊

當(dāng)移動到對應(yīng)的線段上時，鼠標雙擊可以選擇該線段，將該線段的顏色變?yōu)榧t色。

canvas.ondblclick = function (e) {
    var xStart, xEnd, yStart, yEnd;
    var clickPoint = {};
    clickPoint.x = scaleGlassRectangle.x + scaleGlassRectangle.width / 2;
    clickPoint.y = scaleGlassRectangle.y + scaleGlassRectangle.height / 2;
    var index = -1;

    for (var i = 0; i < scaleGlassLines.length; i++) {
        var scaleLine = scaleGlassLines[i];

        xStart = scaleGlassRectangle.x + scaleLine.xStart - 3;
        xEnd = scaleGlassRectangle.x + scaleLine.xStart + 3;
        yStart = scaleGlassRectangle.y + scaleLine.yStart;
        yEnd = scaleGlassRectangle.y + scaleLine.yEnd;

        if (clickPoint.x > xStart && clickPoint.x < xEnd && clickPoint.y < yStart && clickPoint.y > yEnd) {
            scaleLine.color = "#f00";
            index = scaleLine.index;
            break;
        }
    }

    for (var i = 0; i < chartLines.length; i++) {
        var line = chartLines[i];
        if (line.index == index) {
            line.color = "#f00";
        } else {
            line.color = "#888";
        }
    }

    draw();}

鍵盤事件

因為線段離得比較近，所以使用鼠標移動很難精確的選中線段，這里使用鍵盤的w, a, s, d 來進行精確移動

document.onkeyup = function (e) {
    if (e.key == 'w') {
        centerPoint.y = intAdd(centerPoint.y, -0.2);
    }
    if (e.key == 'a') {
        centerPoint.x = intAdd(centerPoint.x, -0.2);
    }
    if (e.key == 's') {
        centerPoint.y = intAdd(centerPoint.y, 0.2);
    }
    if (e.key == 'd') {
        centerPoint.x = intAdd(centerPoint.x, 0.2);
    }
    draw();}

** 參考資料 **
HTML5-MagnifyingGlass