How to use JavaScript to implement zoom and rotation of frame selection canvas

With the development of the Internet, JavaScript has become more and more widely used. In front-end development, especially in the field of graphics editing, zooming and rotating the canvas is a very important function. In the next article, we will introduce how to use JavaScript to realize the zoom and rotation of the frame selection canvas.

Step 1: Create the canvas

Before we start to implement the zoom and rotation of the frame-selected canvas, we need to create the canvas. In HTML, we can create a canvas using the tag. First, we need to set the width and height for the canvas, as shown below:

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

In JavaScript, we can use the following code to get the canvas element:

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

Next we can pass the getContext of canvas The method gets the 2D context, as shown below:

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

In this way, we have successfully created a canvas and context, and then we can draw on the canvas.

Step 2: Draw graphics

In this demo, we will draw three different rectangles and display them on the canvas. In JavaScript, we draw a rectangle using the fillRect method of canvas. The first parameter of this method is the x coordinate of the upper left corner of the rectangle, the second parameter is the y coordinate of the upper left corner of the rectangle, the third parameter is the width of the rectangle, and the fourth parameter is the height of the rectangle, as shown below:

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

The code for drawing three rectangles is as follows:

//矩形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);

Through the above code, we have successfully drawn three rectangles on the canvas.

Step 3: Implement frame selection

Next we start to implement the frame selection function. The specific implementation process is as follows:

1. First, we need to record the mouse Starting point, the code is as follows:

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

2. Then, we need to record the movement of the mouse, the code is as follows:

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. Finally, we need to release the mouse When recording the end point of the mouse, the code is as follows:

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);

Through the above code, we have successfully implemented the frame selection function, and the rectangle on the canvas can be selected by dragging the left mouse button.

Step 4: Implement canvas scaling

Next we will implement the canvas scaling function. The specific implementation process is as follows:

1. First, we need to define a variable scale, which represents the scaling ratio of the canvas. The default value is 1.0. The code is as follows:

var scale = 1.0;

2. Then, we add wheel event monitoring to the canvas, the code is as follows:

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. Finally, we need to set the zoom ratio of the canvas before drawing graphics, the code is as follows:

context.scale(scale, scale);

Through the above code, we have successfully implemented the zoom function of the canvas. You can zoom in or out of the canvas by rolling the mouse wheel.

Step 5: Implement canvas rotation

Next we will implement the canvas rotation function. The specific implementation process is as follows:

1. First, we need to define a variable angle, which represents the rotation angle of the canvas. The default value is 0. The code is as follows:

var angle = 0;

2. Then, we add a right-click event listener on the canvas. The code is as follows:

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. Finally, we need to set the transformation matrix of the canvas before drawing the graphics. The code is as follows:

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

Through the above code, we have successfully implemented the canvas rotation function, which can be rotated by right-clicking the mouse.

To sum up, we have successfully used JavaScript to implement the zoom and rotation function of the frame selection canvas. These functions are very important in the field of graphics editing and help improve user experience and operational efficiency. If you need to use these functions in your project, you can develop based on the above code.

The above is the detailed content of How to use JavaScript to implement zoom and rotation of frame selection canvas. For more information, please follow other related articles on the PHP Chinese website!