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

PHPz
풀어 주다: 2023-04-24 09:45:36
원래의
806명이 탐색했습니다.

인터넷이 발전하면서 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);
로그인 후 복사
  1. 그런 다음 마우스의 움직임을 기록하려면 코드는 다음과 같습니다.
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);
로그인 후 복사
  1. 마지막으로 마우스를 놓을 때 마우스의 끝점을 기록해야 합니다. 코드는 다음과 같습니다.
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;
로그인 후 복사
  1. 그런 다음, 캔버스에 휠 이벤트 리스너를 추가합니다. 코드는 다음과 같습니다.
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);
로그인 후 복사
  1. 마지막으로 그래픽을 그리기 전에 캔버스의 확대/축소 비율을 설정해야 합니다. 코드는 다음과 같습니다.
context.scale(scale, scale);
로그인 후 복사

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

5단계: 캔버스 회전 구현

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

  1. 먼저 캔버스의 회전 각도를 나타내는 변수 각도를 정의해야 합니다. 기본값은 0입니다. 코드는 다음과 같습니다.
var angle = 0;
로그인 후 복사
  1. 그런 다음 캔버스 모니터링에 마우스 오른쪽 버튼 클릭 이벤트를 추가합니다. 코드는 다음과 같습니다.
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);
로그인 후 복사
  1. 마지막으로 그래픽을 그리기 전에 캔버스의 변환 행렬을 설정해야 합니다. 코드는 다음과 같습니다.
context.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), canvas.width / 2, canvas.height / 2);
로그인 후 복사

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

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿