Implementieren Sie den Zuschneide-Mechanismus
Anforderungen:
- Vertrautheit mit der Canvas-API in JavaScript für das Zeichnen und die Bildbearbeitung.
Funktionalität:
- Fügen Sie einen Ausschnittbereich auf dem angezeigten Bild hinzu und machen diesen Bereich verschiebbar. Dies gibt den Benutzern die Flexibilität, den gewünschten Bereich auszuwählen, den sie ausschneiden möchten.
Fügen Sie die relevanten Methoden in main.js hinzu.
- Erstellen Sie eine
cutImage-Methode
Die cutImage-Methode ist hauptsächlich für zwei Aufgaben verantwortlich: eine ist es, eine Maskenschicht zu erstellen, und die andere ist es, mithilfe der CSS-background-Eigenschaft eine Echtzeitvorschau des ausgewählten Ausschnittbereichs bereitzustellen.
cutImage: function () {
var t = this;
t.editBox.height = t.imgHeight;
t.editBox.width = t.imgWidth;
t.editBox.style.display = "block";
t.editBox.style.left = t.px;
t.editBox.style.top = t.py;
var cover = t.editBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect(0, 0, t.imgWidth, t.imgHeight);
cover.clearRect(t.sx, t.sy, t.sHeight, t.sWidth);
document.getElementById("show_edit").style.background =
"url(" + t.imgUrl + ")" + -t.sx + "px " + -t.sy + "px no-repeat";
document.getElementById("show_edit").style.height = t.sHeight + "px";
document.getElementById("show_edit").style.width = t.sWidth + "px";
},
- Erstellen Sie eine
drag-Methode
drag: function () {
var t = this;
var draging = false;
var startX = 0;
var startY = 0;
document.getElementById("cover_box").onmousemove = function (e) {
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
if (
pageX > t.sx &&
pageX < t.sx + t.sWidth &&
pageY > t.sy &&
pageY < t.sy + t.sHeight
) {
this.style.cursor = "move";
this.onmousedown = function () {
draging = true;
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
};
window.onmouseup = function () {
draging = false;
};
if (draging) {
if (t.ex + (pageX - startX) < 0) {
t.sx = 0;
} else if (t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
t.sx = t.imgWidth - t.sWidth;
} else {
t.sx = t.ex + (pageX - startX);
}
if (t.ey + (pageY - startY) < 0) {
t.sy = 0;
} else if (t.ey + (pageY - startY) + t.sHeight > t.imgHeight) {
t.sy = t.imgHeight - t.sHeight;
} else {
t.sy = t.ey + (pageY - startY);
}
t.cutImage();
}
} else {
this.style.cursor = "auto";
}
};
},
Um diese Methode zu verstehen, müssen Sie die folgenden Schlüsselpunkte verstehen:
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Mit den obigen beiden Zeilen Code erhalten wir die Entfernung zwischen der Maus und dem Hintergrundbild. e.pageX repräsentiert die Entfernung von der Maus bis zum linken Rand des Browsers, und t.regional.offsetLeft + this.offsetLeft berechnet die Entfernung vom Bild bis zum linken Rand des Browsers. Ähnlich kann die obere Entfernung abgeleitet werden.
if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )
Nachdem Sie die Entfernung zwischen der Maus und dem Hintergrundbild verstanden haben, sollte dies leicht zu verstehen sein: Es bestimmt, ob die Maus innerhalb der Bereich des Bilds ist.
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Diese beiden Codeausschnitte sind hervorzuheben. Die ersten beiden Zeilen verzeichnen die Koordinaten vom letzten Screenshot (oder wenn es keinen vorherigen gab, dann die Anfangskoordinaten); die nächsten beiden Zeilen verzeichnen die Koordinaten, wenn die Maus gedrückt wird. Sie können diese Werte separat mit console.log() überprüfen.
if (draging) {
if (t.ex + (pageX - startX) < 0) {
t.sx = 0;
} else if (t.ex + (pageX - startX) + t.sWidth > t.imgWidth) {
t.sx = t.imgWidth - t.sWidth;
} else {
t.sx = t.ex + (pageX - startX);
}
if (t.ey + (pageY - startY) < 0) {
t.sy = 0;
} else if (t.ey + (pageY - startY) + t.sHeight > t.imgHeight) {
t.sy = t.imgHeight - t.sHeight;
} else {
t.sy = t.ey + (pageY - startY);
}
t.cutImage();
}
Der obige Code sagt im Wesentlichen: Wenn wir mitten im Ziehen sind, müssen wir die Werte von t.sx und t.sy in Echtzeit basierend auf den Koordinatenänderungen aktualisieren und die cutImage-Methode aufrufen, um eine Livevorschau bereitzustellen.
Die Koordinaten des Ausschnittbereichs während der Bewegung = letzte aufgezeichnete Position + (aktuelle Mausposition - Position, als die Maus gedrückt wurde)
