Изменить размер текста, чтобы он соответствовал фрагменту в нарисованном круге HTML canvas - PullRequest
Новая
       1

Изменить размер текста, чтобы он соответствовал фрагменту в нарисованном круге HTML canvas

0 голосов
/ 27 апреля 2018

Итак, я создаю Колесо Фортуны на холсте HTML. Из-за того, сколько результатов у меня в запросе, я создам срез для каждого результата, чтобы они вместе составляли до 360 градусов.

С несколькими результатами мне удалось отцентрировать текст, однако, когда возвращается больше результатов (например, 20-25), каждому срезу не дается более 14,4 градусов по кругу. Затем текст начинает перекрывать друг друга.

Я ищу справку о том, как сделать текст font-size максимально большим, но в то же время убедиться, что он находится в пределах границы фрагмента. 

function rand(min, max) {
  return Math.random() * (max - min) + min;
}

var color = [];
var words = ["Restaurant", "Shop", "Coffe Shop", "Store"];
var label = [];

var nWordsToBeAdded = 40; //Modify this to add or remove n slices to the circle

for(var i = 0; i < nWordsToBeAdded; i++){
  label.push(words[Math.floor(Math.random() * words.length)]);
  if(i % 2 == 0){
    color.push("black");
  }else{
    color.push("red");
  }
}

var slices = color.length;
var sliceDeg = 360/slices;
var deg = rand(0, 360);
var speed = 0;
var slowDownRand = 0;
var ctx = canvas.getContext('2d');
var width = canvas.width; // size
var center = width/2;      // center
var isStopped = false;
var lock = false;

function deg2rad(deg) {
  return deg * Math.PI/180;
}

function drawSlice(deg, color) {
  ctx.beginPath();
  ctx.fillStyle = color;
  ctx.moveTo(center, center);
  ctx.arc(center, center, width/2, deg2rad(deg), deg2rad(deg+sliceDeg));
  ctx.lineTo(center, center);
  ctx.fill();
}

function drawText(deg, text) {
  ctx.save();
  ctx.translate(center, center);
  ctx.rotate(deg2rad(deg));
  ctx.textAlign = "center";
  ctx.fillStyle = "#fff";
  ctx.font = 'bold 30px sans-serif';
  ctx.fillText(text, 130, 10);
  ctx.restore();
}

function drawImg() {
  ctx.clearRect(0, 0, width, width);
  for(var i=0; i<slices; i++){
    drawSlice(deg, color[i]);
    drawText(deg+sliceDeg/2, label[i]);
    deg += sliceDeg;
  }
}

(function anim() {
  deg += speed;
  deg %= 360;

  // Increment speed
  if(!isStopped && speed<3){
    speed = speed+1 * 0.1;
  }
  // Decrement Speed
  if(isStopped){
    if(!lock){
      lock = true;
      slowDownRand = rand(0.994, 0.998);
    } 
    speed = speed>0.2 ? speed*=slowDownRand : 0;
  }
  // Stopped!
  if(lock && !speed){
    var ai = Math.floor(((360 - deg - 90) % 360) / sliceDeg); // deg 2 Array Index
    ai = (slices+ai)%slices; // Fix negative index
    return alert("You got:\n"+ label[ai] ); // Get Array Item from end Degree
  }

  drawImg();
  window.requestAnimationFrame( anim );
}());

document.getElementById("spin").addEventListener("mousedown", function(){
  isStopped = true;
}, false);
body{text-align:center;}
#wheel{
  display:inline-block;
  position:relative;
  overflow:hidden;
}
#wheel:after{
  content:"";
  background:red;
  border:2px solid white;
  position:absolute;
  top:-7px;
  left:50%;
  width:10px;
  height:10px;
  margin-left:-7px;
  transform: rotate(45deg)
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jPOT by Roko CB</title>
  </head>
  <body>

    
 <div id="wheel">
    <canvas id="canvas" width="450" height="450"></canvas>
 </div>
    
    <br>
    <button id="spin">Stop!</button>

  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...