HTML5 холст текст ориентации круга внутри колеса - PullRequest
Новая
       45

HTML5 холст текст ориентации круга внутри колеса

0 голосов
/ 29 сентября 2018

https://jsfiddle.net/5e7hwn8m/

Привет, я пытаюсь установить колесо с номерами, а затем внутри выбранных, обозначенных от A до F (A, B, C, D, E и F).

Проблема в том, что АФ вращаются как числа, я не хочу этого, и я не могу понять, что нужно сделать, чтобы они смотрели в мою сторону.

Может ли кто-нибудь направить меня вправо?направление?jsfiddle код для справки: https://jsfiddle.net/5e7hwn8m/

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      ctx.rotate(0);
      ctx.fillText(text, 0, 60);


      ctx.restore();

    }

  }
}



drawWheel();
html,
body {
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>

Спасибо!

Ответы [ 3 ]

0 голосов
/ 29 сентября 2018

Я не очень уверен, если это то, что вы спрашиваете.Я вычисляю точку, где должно появиться письмо, и рисую письмо, не вращаясь.В коде я отметил внесенные мной изменения. 

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      
      /////////////////////////////////////////////////
      // calculating the position for the letter
      var x = 200 + Math.cos(angle + arc / 2) * 100;
      var y = 200 + Math.sin(angle + arc / 2) * 100;
      /////////////////////////////////////////////////
      
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();// restore goes here
      
      
      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      // paint the letter  without rotating
      ctx.fillText(text, x, y);


      

    }

  }
}



drawWheel();
<canvas id="canvas" width="400" height="400"></canvas>
0 голосов
/ 29 сентября 2018

Ваша проблема в том, что ctx.rotate () относится к текущему преобразованию матрицы или, если хотите, к текущему углу поворота.

Это означает, что ваше rotate(0) ничего не будет делать.То, что вы хотите, это rotate( -currentAngle ).
Но прежде чем вызывать его, вам нужно установить позицию текста как точку поворота, т. Е. Как начало нашей матрицы преобразования, и это можно сделать, вызвав ctx.translate(text_x, text_x), и так как мы сейчас находимся в текстовой позиции, мы можем вызвать fillText с 0, 0 параметрами: 

// set the origin to the text's position
ctx.translate(0,60);
// reverse rotate
ctx.rotate(-currentAngle);
// draw at origin (0,0)
ctx.fillText(text, 0, 0);


var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

    ctx = canvas.getContext("2d");
    //ctx.clearRect(0,0,400,400);

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();
      //
      ctx.save();
      //ctx.shadowOffsetX = -1;
      //ctx.shadowOffsetY = -1;
      //ctx.shadowBlur    = 0;
      //ctx.shadowColor   = "rgb(220,220,220)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
/* BEGIN EDIT*/
      // save the currentAngle in a variable
      var currentAngle = angle + arc / 2 + Math.PI / 2;
      ctx.rotate(currentAngle);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';
      // set the origin to the text's position
      ctx.translate(0,60);
      // reverse rotate
      ctx.rotate(-currentAngle);
      // draw at origin (0,0)
      ctx.fillText(text, 0, 0);
/* END EDIT*/
      ctx.restore();

    }

  }
}



drawWheel();
html,
body {
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>
0 голосов
/ 29 сентября 2018

Один из способов сделать это - отрисовывать буквы после колеса.

Вы определяете угол наклона колеса, используя их положение в массиве.чем с помощью cos и sin найти свою позицию в пикселях.

...