堆棧內存溢出
  簡體   English   中英

HTML5畫布文字方向盤內輪

[英]HTML5 canvas text orientation circle inside wheel

 原文  2018-09-29 14:00:32  3   3    javascript/ html5/ canvas/ text/ rotation

問題描述

https://jsfiddle.net/5e7hwn8m/

嗨，我試圖設置一個帶有數字的輪子，然后在從A到F標識的選定數字（A，B，C，D，E和F）的內部。

問題是AF正在像數字一樣旋轉，我不希望那樣，而且我似乎無法弄清楚如何使它們面對我的方向。

誰能指出我正確的方向？ 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 個解決方案

解決方案1
 0  2018-09-29 14:22:05

一種方法是在轉輪后渲染字母。

您可以使用陣列中的位置確定車輪上的角度。 而不是使用cos和sin在像素中找到自己的位置。

解決方案2
 0 已采納  2018-09-29 14:44:30

我不太確定這是否是您要的內容。 我正在計算字母應該出現的點，並且我在不旋轉的情況下繪制字母。 在代碼中，我標記了所做的更改。 

 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>

解決方案3
 0  2018-09-29 15:00:25

您的問題是ctx.rotate（）相對於當前矩陣變換，或者相對於當前旋轉角度。

這意味着您的rotate(0)將什么也不做。 您想要的是rotate( -currentAngle ) 。
但是在調用它之前，您必須將文本的位置設置為旋轉的樞軸，即作為我們轉換矩陣的原點，這可以通過調用ctx.translate(text_x, text_x)來完成，因為現在位於文本位置，我們可以使用0、0參數調用fillText： 

// 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML5 畫布圓形文本 HTML5畫布-在圓上繪制線性漸變（色輪） HTML5 Canvas文字圍繞圓圈動畫 HTML5 Canvas - 在特定角度的圓內畫一條線 使用html5在canvas中移動文本 在html5畫布的矩形內對齊文本 html5畫布圓形調色板 html5畫布中心圓 HTML5畫布-運動圈 HTML5 Canvas和JavaScript獎輪
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM