Mettre en œuvre le mécanisme de découpe
Exigences :
- Familiarité avec l'API Canvas en JavaScript pour le dessin et la manipulation d'images.
Fonctionnalité :
- Ajouter une région de découpe sur l'image affichée et rendre cette région déplaçable. Cela offre aux utilisateurs la flexibilité de sélectionner la zone souhaitée à découper.
Ajoutez les méthodes pertinentes dans main.js.
-
Créer une méthode cutImage
La méthode cutImage est principalement responsable de deux tâches : l'une est de créer une couche de masque, et l'autre est d'utiliser la propriété CSS background pour fournir une prévisualisation en temps réel de la zone de découpe sélectionnée.
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";
},
- Créer une méthode
drag
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";
}
};
},
Pour comprendre cette méthode, vous devez saisir les points clés suivants :
var pageX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
var pageY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Avec les deux lignes de code ci-dessus, nous obtenons la distance entre la souris et l'image d'arrière-plan. e.pageX représente la distance de la souris au bord gauche du navigateur, et t.regional.offsetLeft + this.offsetLeft calcule la distance de l'image au bord gauche du navigateur. De même, la distance supérieure peut être déduite.
if ( pageX > t.sx && pageX < t.sx + t.sWidth && pageY > t.sy && pageY < t.sy + t.sHeight )
Ayant compris la distance entre la souris et l'image d'arrière-plan, cela devrait être facile à saisir : cela détermine si la souris est dans la région de l'image.
t.ex = t.sx;
t.ey = t.sy;
startX = e.pageX - (t.regional.offsetLeft + this.offsetLeft);
startY = e.pageY - (t.regional.offsetTop + this.offsetTop);
Ces deux extraits de code méritent d'être soulignés. Les deux premières lignes enregistrent les coordonnées de la dernière capture d'écran (ou si il n'y en a pas eu de précédente, alors les coordonnées initiales) ; les deux lignes suivantes enregistrent les coordonnées lorsque la souris est pressée. Vous pouvez examiner ces valeurs séparément à l'aide de console.log().
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();
}
Le code ci-dessus signifie essentiellement : si nous sommes en train de faire glisser, nous devons mettre à jour en temps réel les valeurs de t.sx et t.sy en fonction des changements de coordonnées et appeler la méthode cutImage pour fournir une prévisualisation en direct.
les coordonnées de la zone de découpe pendant le déplacement = dernière position enregistrée + (position actuelle de la souris - position lorsque la souris a été pressée)
