Comment utiliser JavaScript pour implémenter le zoom et la rotation du canevas de sélection de cadre

Avec le développement d'Internet, JavaScript est devenu de plus en plus utilisé. Dans le développement front-end, en particulier dans le domaine de l'édition graphique, le zoom et la rotation du canevas sont une fonction très importante. Dans le prochain article, nous présenterons comment utiliser JavaScript pour réaliser le zoom et la rotation du canevas de sélection de cadre.

Étape 1 : Créer le canevas

Avant de commencer à implémenter le zoom et la rotation du canevas sélectionné dans la boîte, nous devons créer le canevas. En HTML, nous pouvons créer un canevas à l'aide de la balise Tout d'abord, nous devons définir la largeur et la hauteur du canevas, comme indiqué ci-dessous :

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

En JavaScript, nous pouvons utiliser le code suivant pour obtenir l'élément canevas :

var canvas = document.getElementById("myCanvas");

Ensuite, nous pouvons obtenir le contexte 2D via la méthode getContext. de toile, comme indiqué ci-dessous :

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

De cette façon, nous avons réussi à créer une toile et un contexte, puis nous pouvons dessiner sur la toile.

Étape 2 : Dessiner des graphiques

Dans cette démo, nous allons dessiner trois rectangles différents et les afficher sur la toile. En JavaScript, nous dessinons un rectangle en utilisant la méthode fillRect de canvas. Le premier paramètre de cette méthode est la coordonnée x du coin supérieur gauche du rectangle, le deuxième paramètre est la coordonnée y du coin supérieur gauche du rectangle, le troisième paramètre est la largeur du rectangle et le quatrième paramètre est la hauteur du rectangle, comme suit :

context.fillRect(x, y, width, height);

Le code pour dessiner trois rectangles est le suivant :

//矩形1
context.fillStyle="red";
context.fillRect(50,50,100,100);

//矩形2
context.fillStyle="green";
context.fillRect(200,200,100,100);

//矩形3
context.fillStyle="blue";
context.fillRect(350,350,100,100);

Avec le code ci-dessus, nous avons réussi à dessiner trois rectangles sur la toile.

Étape 3 : Implémenter la sélection de cadre

Ensuite, nous commençons à implémenter la fonction de sélection de cadre. Le processus d'implémentation spécifique est le suivant :

1. Tout d'abord, nous devons enregistrer le point de départ de la souris, le code est le suivant :

var startX, startY;
canvas.addEventListener("mousedown", function(e) {
  startX = e.pageX - canvas.offsetLeft;
  startY = e.pageY - canvas.offsetTop;
}, false);

2. Ensuite, nous devons enregistrer le mouvement de la souris, le code est le suivant :

canvas.addEventListener("mousemove", function(e) {
    if (e.buttons === 1) { // 按下鼠标左键拖动
        var moveX = e.pageX - startX;
        var moveY = e.pageY - startY;
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRectangles(moveX, moveY);
    }
}, false);

3. Enfin, nous devons enregistrer le point final de la souris lorsque la souris est relâchée, le code est le suivant suit :

canvas.addEventListener("mouseup", function(e) {
    var endX = e.pageX - canvas.offsetLeft;
    var endY = e.pageY - canvas.offsetTop;
    var moveX = endX - startX;
    var moveY = endY - startY;
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawRectangles(moveX, moveY);
}, false);

Grâce au code ci-dessus, nous avons implémenté avec succès la fonction de sélection de cadre, qui peut être passée Faites glisser le bouton gauche de la souris pour sélectionner un rectangle sur le canevas.

Étape 4 : Implémenter la mise à l'échelle du canevas

Ensuite, nous implémenterons la fonction de mise à l'échelle du canevas. Le processus de mise en œuvre spécifique est le suivant :

1. Tout d'abord, nous devons définir une échelle variable, qui représente le rapport de mise à l'échelle du canevas. La valeur par défaut est 1,0. Le code est le suivant :

var scale = 1.0;

2. Ensuite, nous. ajoutez un écouteur d'événement de roue au canevas, Le code est le suivant :

canvas.addEventListener("wheel", function(e) {
    e.preventDefault();
    var wheelDelta = e.deltaY;
    if (wheelDelta > 0) scale -= 0.1;
    else scale += 0.1;
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawRectangles(0, 0); // 传递0，0以清除框选效果
}, false);

3. Enfin, nous devons définir le taux de zoom du canevas avant de dessiner les graphiques. Le code est le suivant :

context.scale(scale, scale);

Grâce à ce qui précède. code, nous avons implémenté avec succès la fonction de zoom du canevas, qui peut être effectuée en faisant tourner la molette de la souris pour zoomer ou dézoomer sur le canevas.

Étape 5 : Implémenter la rotation du canevas

Ensuite, nous implémenterons la fonction de rotation du canevas. Le processus spécifique de mise en œuvre est le suivant :

1. Tout d'abord, nous devons définir un angle variable, qui représente l'angle de rotation du canevas. La valeur par défaut est 0. Le code est le suivant :

var angle = 0;

2. Ensuite, nous. ajoutez un événement clic droit sur le canevas Monitoring, le code est le suivant :

canvas.addEventListener("mouseup", function(e) {
    if (e.button === 2) { // 按下鼠标右键
        angle += 90;
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRectangles(0, 0); // 传递0，0以清除框选效果
    }
}, false);

3. Enfin, il faut définir la matrice de transformation du canevas avant de dessiner les graphiques, le code est le suivant :

context.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), canvas.width / 2, canvas.height / 2);

Par Avec le code ci-dessus, nous avons implémenté avec succès la fonction de rotation du canevas, qui peut être effectuée via le clic droit de la souris pour faire pivoter.

En résumé, nous avons implémenté avec succès la fonction de zoom et de rotation du canevas de sélection de cadre à l'aide de JavaScript. Ces fonctions sont très importantes dans le domaine de l'édition graphique et contribuent à améliorer l'expérience utilisateur et l'efficacité opérationnelle. Si vous devez utiliser ces fonctions dans votre projet, vous pouvez développer sur la base du code ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!