Hướng dẫn how do you rotate an object in javascript? - làm thế nào để bạn xoay một đối tượng trong javascript?

Question

Tóm tắt: Trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức JavaScript

degree * Math.PI / 180

Nội dung chính Show

Giới thiệu về API canvas rots () Canvas API
Ví dụ rotate () JavaScript
Bản tóm tắt
Làm thế nào để xoay hoạt động trong JavaScript?
Xoay và đối tượng là gì?

Code language: JavaScript (javascript)

0 để xoay các đối tượng vẽ.: in this tutorial, you’ll learn how to use the JavaScript

degree * Math.PI / 180
Code language: JavaScript (javascript)

0 method to rotate drawing objects.

Giới thiệu về API canvas rots () Canvas API

degree * Math.PI / 180
Code language: JavaScript (javascript)

0 là một phương pháp của bối cảnh bản vẽ 2D. Phương thức xoay () cho phép bạn xoay một đối tượng vẽ trên khung vẽ.

Đây là cú pháp của phương thức

degree * Math.PI / 180
Code language: JavaScript (javascript)

0:

ctx.rotate(angle)
Code language: CSS (css)

Phương pháp

degree * Math.PI / 180
Code language: JavaScript (javascript)

0 chấp nhận một góc xoay trong radian.

Nếu góc dương, vòng quay theo chiều kim đồng hồ. Trong trường hợp góc là âm, vòng quay ngược chiều kim đồng hồ.

Để chuyển đổi một mức độ thành radian, bạn sử dụng fomular sau:

degree * Math.PI / 180
Code language: JavaScript (javascript)

Khi thêm một vòng quay, phương thức

degree * Math.PI / 180



Code language: JavaScript (javascript)

0 sử dụng nguồn gốc khung vẽ làm điểm trung tâm xoay.

Hình ảnh sau đây minh họa cho vòng quay:

Nếu bạn muốn thay đổi điểm trung tâm xoay, bạn cần di chuyển nguồn gốc của khung vẽ bằng phương pháp

degree * Math.PI / 180
Code language: JavaScript (javascript)

5.

Ví dụ rotate () JavaScript

Ví dụ sau đây vẽ một hình chữ nhật màu đỏ bắt đầu từ trung tâm của khung vẽ. Sau đó, nó dịch nguồn gốc của Canvas sang trung tâm Canvas và vẽ hình chữ nhật thứ hai với vòng quay 45 độ:

HTML

<canvas id="canvas" height="300" width="500">
canvas>
Code language: HTML, XML (xml)

JavaScript

const canvas = document.querySelector('#canvas');

if (canvas.getContext) {

    // rectangle's width and height
    const width = 150,
        height = 20;

    // canvas center X and Y
    const centerX = canvas.width / 2,
        centerY = canvas.height / 2;

    const ctx = canvas.getContext('2d');

    // a red rectangle
    ctx.fillStyle = 'red';
    ctx.fillRect(centerX, centerY, width, height);

    // move the origin to the canvas' center
    ctx.translate(centerX, centerY);

    // add 45 degrees rotation
    ctx.rotate(45 * Math.PI / 180);

    // draw the second rectangle
    ctx.fillStyle = 'rgba(0,0,255,0.5)';
    ctx.fillRect(0, 0, width, height);

}
Code language: JavaScript (javascript)

Đây là liên kết demo.

Output:

Hướng dẫn how do you rotate an object in javascript? - làm thế nào để bạn xoay một đối tượng trong javascript?

Bản tóm tắt

Sử dụng phương thức JavaScript
```
degree * Math.PI / 180
Code language: JavaScript (javascript)
```
0 để xoay đối tượng bản vẽ trên khung vẽ.

Hướng dẫn này có hữu ích không?

Tôi đang cố gắng xoay một đối tượng xung quanh một trung tâm di chuyển chuột, mọi thứ sẽ hoàn hảo, nhưng khi tôi nhấp vào đối tượng này lần đầu tiên để xoay nó, vị trí thay đổi.

    var el, offsetTop, offsetLft, offsetWdt,offsetHit , mouseDown;

    el = document.getElementById('switcher');
    var offset = getOffset( el );

    offsetTop = offset.top;
    offsetLft = offset.left;
    offsetWdt = el.offsetWidth;
    offsetHit = el.offsetHeight;
    mouseDown = false;

    function mouse(evt) {
      var center_x, center_y, mouse_x, mouse_y, radians, degree;
      evt.preventDefault();

      if (mouseDown == true) {
        center_x = (offsetLft) + (offsetWdt / 2);
        center_y = (offsetTop) + (offsetHit / 2);

        mouse_x = evt.pageX;
        mouse_y = evt.pageY;



        radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        degree = (radians * (180 / Math.PI) * -1) + 90;

        el.style.webkitTransform = 'rotate(' + degree + 'deg)';
        el.style.MozTransform = 'rotate(' + degree + 'deg)';
        el.style.msTransform = 'rotate(' + degree + 'deg)';
        el.style.OTransform = 'rotate(' + degree + 'deg)';
        el.style.transform = 'rotate(' + degree + 'deg)';
      }
    }

    el.addEventListener("mousedown", function () {
      mouseDown = true;
      el.addEventListener("mousemove", mouse, false);
    }, false);

   

    el.addEventListener("mouseup", function () {
      mouseDown = false;
    })
  

  function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
      _x += el.offsetLeft - el.scrollLeft;
      _y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: _y, left: _x };
  }

.content {
      width: 900px;
      margin: 0 auto;
      border: 1px solid #DA574A;
    }

    .container {
      position: relative;
      width: 25em;
      height: 25em;
      padding: 2.8em;
      background-color: #ccc;
      margin: 0 auto;
    }

    .circle-24, .circle-12, .center, #switcher {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      border-radius: 50%;
    }

    .circle-24 {
      width: 20em;
      height: 20em;
      z-index: 2;
      background-color: #fff;
    }

    .circle-12 {
      width: 15em;
      height: 15em;
      z-index: 3;
      background-color: #ff0;
    }

    .center {
      width: 0.5em;
      height: 0.5em;
      z-index: 5;
      background-color: red;
    }

    #switcher {
      height: 300px;
      width: 300px;
      z-index: 4;
      background-color: #d6dceb;
    }

    .rotator {
      position: absolute;
      width: 150px;
      height: 2px;
      left: 150px;
      top: 150px;
    }

    .rotator .hand {
      position: absolute;
      cursor: pointer;
      width: 110px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 40, 160, 0.12);
      transition: .4s;
    }

    .rotator .pointer {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      right: 0px;
      bottom: -20px;
      border-radius: 40px;
      background-color: rgba(0, 40, 160, 0.12);
    }

    .circle-12 div, .circle-24 div {
      width: 2em;
      height: 2em;
      background-color: #DA574A;
    }

Hãy xem JSFiddle này,

https://fiddle.jshell.net/zoom2u/3nxyfhe3/

Cảm ơn bạn rất nhiều trước.

Đã hỏi ngày 12 tháng 1 năm 2017 lúc 16:32Jan 12, 2017 at 16:32

BaselbaselBasel

331 Huy hiệu bạc6 Huy hiệu đồng1 silver badge6 bronze badges

2

Dịch đối tượng lên và bên trái trước, sau đó thực hiện vòng quay.

    var el, offsetTop, offsetLft, offsetWdt,offsetHit , mouseDown;

    el = document.getElementById('switcher');
    var offset = getOffset( el );

    offsetTop = offset.top;
    offsetLft = offset.left;
    offsetWdt = el.offsetWidth;
    offsetHit = el.offsetHeight;
    mouseDown = false;

    function mouse(evt) {
      var center_x, center_y, mouse_x, mouse_y, radians, degree;
      evt.preventDefault();

      if (mouseDown == true) {
        center_x = (offsetLft) + (offsetWdt / 2);
        center_y = (offsetTop) + (offsetHit / 2);

        mouse_x = evt.pageX;
        mouse_y = evt.pageY;



        radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        degree = (radians * (180 / Math.PI) * -1) + 90;

        el.style.webkitTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.MozTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.msTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.OTransform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
        el.style.transform = 'translate(-50%, -50%) rotate(' + degree + 'deg)';
      }
    }

    el.addEventListener("mousedown", function () {
      mouseDown = true;
      el.addEventListener("mousemove", mouse, false);
    }, false);

   

    el.addEventListener("mouseup", function () {
      mouseDown = false;
    })
  

  function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
      _x += el.offsetLeft - el.scrollLeft;
      _y += el.offsetTop - el.scrollTop;
      el = el.offsetParent;
    }
    return { top: _y, left: _x };
  }

.content {
      width: 900px;
      margin: 0 auto;
      border: 1px solid #DA574A;
    }

    .container {
      position: relative;
      width: 25em;
      height: 25em;
      padding: 2.8em;
      background-color: #ccc;
      margin: 0 auto;
    }

    .circle-24, .circle-12, .center, #switcher {
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      border-radius: 50%;
    }

    .circle-24 {
      width: 20em;
      height: 20em;
      z-index: 2;
      background-color: #fff;
    }

    .circle-12 {
      width: 15em;
      height: 15em;
      z-index: 3;
      background-color: #ff0;
    }

    .center {
      width: 0.5em;
      height: 0.5em;
      z-index: 5;
      background-color: red;
    }

    #switcher {
      height: 300px;
      width: 300px;
      z-index: 4;
      background-color: #d6dceb;
    }

    .rotator {
      position: absolute;
      width: 150px;
      height: 2px;
      left: 150px;
      top: 150px;
    }

    .rotator .hand {
      position: absolute;
      cursor: pointer;
      width: 110px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 40, 160, 0.12);
      transition: .4s;
    }

    .rotator .pointer {
      position: absolute;
      content: "";
      height: 40px;
      width: 40px;
      right: 0px;
      bottom: -20px;
      border-radius: 40px;
      background-color: rgba(0, 40, 160, 0.12);
    }

    .circle-12 div, .circle-24 div {
      width: 2em;
      height: 2em;
      background-color: #DA574A;
    }

Đã trả lời ngày 12 tháng 1 năm 2017 lúc 17:11Jan 12, 2017 at 17:11

Bobjoebobjoebobjoe

6736 Huy hiệu bạc11 Huy hiệu đồng6 silver badges11 bronze badges

3

Làm thế nào để xoay hoạt động trong JavaScript?

Phương thức xoay () chấp nhận một góc xoay trong radian.Nếu góc dương, vòng quay theo chiều kim đồng hồ.Trong trường hợp góc là âm, vòng quay ngược chiều kim đồng hồ.Khi thêm một vòng quay, phương thức xoay () sử dụng nguồn gốc canvas làm điểm trung tâm quay.

Xoay và đối tượng là gì?

Xoay, hoặc spin, là chuyển động tròn của một vật thể xung quanh một trục trung tâm.Một đối tượng quay hai chiều chỉ có một trục trung tâm có thể và có thể xoay theo hướng theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ.Một đối tượng ba chiều có vô số trục trung tâm và hướng quay có thể.the circular movement of an object around a central axis. A two-dimensional rotating object has only one possible central axis and can rotate in either a clockwise or counterclockwise direction. A three-dimensional object has an infinite number of possible central axes and rotational directions.

programming javascript Rotation JavaScript CSS rotate Game rotation

Hướng dẫn how do you rotate an object in javascript? - làm thế nào để bạn xoay một đối tượng trong javascript?

Giới thiệu về API canvas rots () Canvas API

Ví dụ rotate () JavaScript

HTML

JavaScript

Bản tóm tắt

Làm thế nào để xoay hoạt động trong JavaScript?

Xoay và đối tượng là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội