JavaScript를 사용하여 프레임 선택 캔버스의 확대/축소 및 회전을 구현하는 방법

인터넷이 발전하면서 JavaScript가 점점 더 널리 사용되게 되었습니다. 프론트엔드 개발, 특히 그래픽 편집 분야에서 캔버스를 확대/축소하고 회전시키는 것은 매우 중요한 기능입니다. 다음 기사에서는 JavaScript를 사용하여 프레임 선택 캔버스의 확대/축소 및 회전을 구현하는 방법을 소개합니다.

1단계: 캔버스 만들기

상자에서 선택한 캔버스의 확대/축소 및 회전 구현을 시작하기 전에 캔버스를 만들어야 합니다. HTML에서는 태그를 사용하여 캔버스를 만들 수 있습니다. 먼저 아래와 같이 캔버스의 너비와 높이를 설정해야 합니다.

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

JavaScript에서는 다음 코드를 사용하여 캔버스 요소를 가져올 수 있습니다.

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

다음으로 getContext 메소드를 통해 2D 컨텍스트를 가져올 수 있습니다.

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

이런 식으로 캔버스와 컨텍스트를 성공적으로 생성한 다음 캔버스에 그림을 그릴 수 있습니다.

2단계: 그래픽 그리기

이 데모에서는 세 가지 다른 직사각형을 그려 캔버스에 표시합니다. JavaScript에서는 캔버스의 fillRect 메서드를 사용하여 사각형을 그립니다. 이 메소드의 첫 번째 매개변수는 직사각형의 왼쪽 위 모서리의 x 좌표이고, 두 번째 매개변수는 직사각형의 왼쪽 위 모서리의 y 좌표이며, 세 번째 매개변수는 직사각형의 너비, 네 번째 매개변수는

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

세 개의 직사각형을 그리는 코드는 다음과 같습니다.

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

위 코드를 사용하여 캔버스에 세 개의 직사각형을 성공적으로 그렸습니다.

3단계: 프레임 선택 구현

다음으로 프레임 선택 기능 구현을 시작합니다. 구체적인 구현 과정은 다음과 같습니다.

1. 먼저 마우스의 시작점을 기록해야 합니다. 코드는 다음과 같습니다.

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

2. 그런 다음 마우스의 움직임을 기록하려면 코드는 다음과 같습니다.

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. 마지막으로 마우스를 놓을 때 마우스의 끝점을 기록해야 합니다. 코드는 다음과 같습니다.

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

위 코드를 통해 전달할 수 있는 프레임 선택 기능을 성공적으로 구현했습니다. 마우스 왼쪽 버튼을 드래그하여 캔버스에서 사각형을 선택합니다.

4단계: 캔버스 크기 조정 구현

다음으로 캔버스 크기 조정 기능을 구현하겠습니다. 구체적인 구현 과정은 다음과 같습니다.

1. 먼저 캔버스의 확대/축소 비율을 나타내는 가변 크기를 정의해야 합니다. 기본값은 1.0입니다.

var scale = 1.0;

2. 그런 다음, 캔버스에 휠 이벤트 리스너를 추가합니다. 코드는 다음과 같습니다.

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. 마지막으로 그래픽을 그리기 전에 캔버스의 확대/축소 비율을 설정해야 합니다. 코드는 다음과 같습니다.

context.scale(scale, scale);

위를 통해. 코드에서는 마우스 휠을 굴려 캔버스를 확대하거나 축소하여 수행할 수 있는 캔버스의 확대/축소 기능을 성공적으로 구현했습니다.

5단계: 캔버스 회전 구현

다음으로 캔버스 회전 기능을 구현하겠습니다. 구체적인 구현 과정은 다음과 같습니다.

1. 먼저 캔버스의 회전 각도를 나타내는 변수 각도를 정의해야 합니다. 기본값은 0입니다. 코드는 다음과 같습니다.

var angle = 0;

2. 그런 다음 캔버스 모니터링에 마우스 오른쪽 버튼 클릭 이벤트를 추가합니다. 코드는 다음과 같습니다.

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. 마지막으로 그래픽을 그리기 전에 캔버스의 변환 행렬을 설정해야 합니다. 코드는 다음과 같습니다.

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

Through 위 코드를 사용하여 캔버스의 회전 기능을 성공적으로 구현했습니다. 회전하려면 마우스 오른쪽 버튼을 클릭하여 수행할 수 있습니다.

요약하자면, JavaScript를 사용하여 프레임 선택 캔버스의 확대/축소 및 회전 기능을 성공적으로 구현했습니다. 이러한 기능은 그래픽 편집 분야에서 매우 중요하며 사용자 경험과 운영 효율성을 향상시키는 데 도움이 됩니다. 프로젝트에서 이러한 기능을 사용해야 한다면 위의 코드를 기반으로 개발하면 됩니다.

위 내용은 JavaScript를 사용하여 프레임 선택 캔버스의 확대/축소 및 회전을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!