堆棧內存溢出
  簡體   English   中英

如何從車輪上獲得帆布的價值

[英]How To Get Value Of Canvas From A Wheel

 原文  2015-12-31 16:06:50  6   2    javascript/ jquery/ html/ html5/ canvas

問題描述

如何獲得畫布的價值。 我有一個在鼠標上方旋轉的滾輪，現在我想回顯其停止的值。 它正在打印整個數組。 不是車輪停止的那個。 

$("#canvas").mouseover(function(){
  backup= ctx;
  alert(myData);
  ctx = null;
});

這是小提琴： https : //jsfiddle.net/z61n9ccx/3/

這是完整的代碼： 

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; var PI2 = Math.PI * 2; var myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var cx = 150; var cy = 150; var radius = 150; var wheel = document.createElement('canvas'); var wheelCtx = wheel.getContext('2d'); var indicator = document.createElement('canvas'); var indicatorCtx = indicator.getContext('2d'); var angle = PI2 - PI2 / 4; var myColor = []; for (var i = 0; i < myData.length; i++) { myColor.push(randomColor()); } makeWheel(); makeIndicator(); requestAnimationFrame(animate); function makeWheel() { wheel.width = wheel.height = radius * 2 + 2; wheelCtx.lineWidth = 1; wheelCtx.font = '40px Pacifico, cursive'; wheelCtx.textAlign = 'center'; wheelCtx.textBaseline = 'middle'; var cx = wheel.width / 2; var cy = wheel.height / 2; var sweepAngle = PI2 / myData.length; var startAngle = 0; for (var i = 0; i < myData.length; i++) { // calc ending angle based on starting angle var endAngle = startAngle + sweepAngle; // draw the wedge wheelCtx.beginPath(); wheelCtx.moveTo(cx, cy); wheelCtx.arc(cx, cy, radius, startAngle, endAngle, false); wheelCtx.closePath(); wheelCtx.fillStyle = myColor[i]; wheelCtx.strokeStyle = 'black'; wheelCtx.fill(); wheelCtx.stroke(); // draw the label var midAngle = startAngle + (endAngle - startAngle) / 2; var labelRadius = radius * .85; var x = cx + (labelRadius) * Math.cos(midAngle); var y = cy + (labelRadius) * Math.sin(midAngle); wheelCtx.fillStyle = 'gold'; wheelCtx.fillText(myData[i], x, y); wheelCtx.strokeText(myData[i], x, y); // increment angle startAngle += sweepAngle; } } function makeIndicator() { indicator.width = indicator.height = radius + radius / 10; indicatorCtx.font = '40px Georgia'; indicatorCtx.textAlign = 'center'; indicatorCtx.textBaseline = 'middle'; indicatorCtx.fillStyle = 'skyblue'; indicatorCtx.strokeStyle = 'blue'; indicatorCtx.lineWidth = 1; var cx = indicator.width / 2; var cy = indicator.height / 2; indicatorCtx.beginPath(); indicatorCtx.moveTo(cx - radius / 8, cy); indicatorCtx.lineTo(cx, cy - indicator.height / 2); indicatorCtx.lineTo(cx + radius / 8, cy); indicatorCtx.closePath(); indicatorCtx.fillStyle = 'skyblue' indicatorCtx.fill(); indicatorCtx.stroke(); indicatorCtx.beginPath(); indicatorCtx.arc(cx, cy, radius / 3, 0, PI2); indicatorCtx.closePath(); indicatorCtx.fill(); indicatorCtx.stroke(); indicatorCtx.fillStyle = 'blue'; indicatorCtx.fillText('Prizes', cx, cy); } function animate(time) { ctx.clearRect(0, 0, cw, ch); ctx.translate(cw / 2, ch / 2); ctx.rotate(angle); ctx.drawImage(wheel, -wheel.width / 2, -wheel.height / 2); ctx.rotate(-angle); ctx.translate(-cw / 2, -ch / 2); ctx.drawImage(indicator, cw / 2 - indicator.width / 2, ch / 2 - indicator.height / 2) angle += PI2 / 360; requestAnimationFrame(animate); } function randomColor() { return ('#' + Math.floor(Math.random() * 16777215).toString(16)); } var backup = null; $("#canvas").mouseover(function() { backup = ctx; alert(myData); ctx = null; }); $("#canvas").mouseout(function() { // backup= ctx; ctx = backup; animate(); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <canvas id="canvas" width="600" height="600" style="background-color:#ffff"> </canvas>

2 個解決方案

解決方案1
 2 已采納  2015-12-31 17:59:46

我添加了一個計數器，然后將其用作索引： https : //jsfiddle.net/Twisty/L6nws9yz/2/

HTML 

<canvas id="canvas" width="310" height="310" style="background-color:#ffff">
</canvas>
<div id="counterBox">
  <label>Counter:</label>
  <span></span>
</div>
<div id="countBox">
  <label>Index:</label>
  <span></span>
</div>

JS 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

var PI2 = Math.PI * 2;
var myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var cx = 150;
var cy = 150;
var radius = 150;

var wheel = document.createElement('canvas');
var wheelCtx = wheel.getContext('2d');

var indicator = document.createElement('canvas');
var indicatorCtx = indicator.getContext('2d');
var currentSelection = 12;
var counter = 360;

var angle = PI2 - PI2 / 4;

var myColor = [];
for (var i = 0; i < myData.length; i++) {
  myColor.push(randomColor());
}

makeWheel();
makeIndicator();

requestAnimationFrame(animate);

function makeWheel() {

  wheel.width = wheel.height = radius * 2 + 2;
  wheelCtx.lineWidth = 1;
  wheelCtx.font = '40px Pacifico, cursive';
  wheelCtx.textAlign = 'center';
  wheelCtx.textBaseline = 'middle';

  var cx = wheel.width / 2;
  var cy = wheel.height / 2;

  var sweepAngle = PI2 / myData.length;
  var startAngle = 0;
  for (var i = 0; i < myData.length; i++) {

    // calc ending angle based on starting angle
    var endAngle = startAngle + sweepAngle;

    // draw the wedge
    wheelCtx.beginPath();
    wheelCtx.moveTo(cx, cy);
    wheelCtx.arc(cx, cy, radius, startAngle, endAngle, false);
    wheelCtx.closePath();
    wheelCtx.fillStyle = myColor[i];
    wheelCtx.strokeStyle = 'black';
    wheelCtx.fill();
    wheelCtx.stroke();

    // draw the label
    var midAngle = startAngle + (endAngle - startAngle) / 2;
    var labelRadius = radius * .85;
    var x = cx + (labelRadius) * Math.cos(midAngle);
    var y = cy + (labelRadius) * Math.sin(midAngle);
    wheelCtx.fillStyle = 'gold';
    wheelCtx.fillText(myData[i], x, y);
    wheelCtx.strokeText(myData[i], x, y);

    // increment angle
    startAngle += sweepAngle;
  }


}

function makeIndicator() {
  indicator.width = indicator.height = radius + radius / 10;
  indicatorCtx.font = '40px Georgia';
  indicatorCtx.textAlign = 'center';
  indicatorCtx.textBaseline = 'middle';
  indicatorCtx.fillStyle = 'skyblue';
  indicatorCtx.strokeStyle = 'blue';
  indicatorCtx.lineWidth = 1;

  var cx = indicator.width / 2;
  var cy = indicator.height / 2;

  indicatorCtx.beginPath();
  indicatorCtx.moveTo(cx - radius / 8, cy);
  indicatorCtx.lineTo(cx, cy - indicator.height / 2);
  indicatorCtx.lineTo(cx + radius / 8, cy);
  indicatorCtx.closePath();
  indicatorCtx.fillStyle = 'skyblue'
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.beginPath();
  indicatorCtx.arc(cx, cy, radius / 3, 0, PI2);
  indicatorCtx.closePath();
  indicatorCtx.fill();
  indicatorCtx.stroke();

  indicatorCtx.fillStyle = 'blue';
  indicatorCtx.fillText('Prizes', cx, cy);
}


var lastloop = new Date;
var thisloop = new Date;
var fps = 0;

function animate(time) {
  ctx.clearRect(0, 0, cw, ch);
  ctx.translate(cw / 2, ch / 2);
  ctx.rotate(angle);
  ctx.drawImage(wheel, -wheel.width / 2, -wheel.height / 2);
  ctx.rotate(-angle);
  ctx.translate(-cw / 2, -ch / 2);
  ctx.drawImage(indicator, cw / 2 - indicator.width / 2, ch / 2 - indicator.height / 2)
  angle += PI2 / 360;
  thisloop = new Date;
  fps = 1000 / (thisloop - lastloop);
  lastloop = thisloop;
  counter--;
  if (counter < 1) {
    counter = 360;
  }
  $("#counterBox span").html(counter);
  var index = counter / 30;
  $("#countBox span").html(Math.round(index));
  //$("#fpsBox span").html(fps);
  requestAnimationFrame(animate);
}


function randomColor() {
  return ('#' + Math.floor(Math.random() * 16777215).toString(16));
}

var backup = null;

$("#canvas").mouseover(function() {
  backup = ctx;
  alert(myData[Math.round(counter / 30)-1]);
  ctx = null;
});

$("#canvas").mouseout(function() {
  // backup= ctx;
  ctx = backup;
  animate();
});

計數器設置為360，然后每幀減小它。 將其除以30（360/12），就可以計算出每個楔形。 我四舍五入，現在我的數字是0-11。

更新

我將索引移到了全球空間。 為了更加精確，我使用%運算符，如下所示： 

  counter--;
  if (counter == 0) {
    counter = 360;
  }
  $("#counterBox span").html(counter);
  if (counter % 30 === 0) {
    index--;
  }
  $("#countBox span").html(Math.round(index));
  if (index === 0) {
    index = 12;
  }

當您將鼠標懸停在上方時，將得到以下選擇： 

$("#canvas").mouseover(function() {
  backup = ctx;
  alert(index);
  ctx = null;
});

解決方案2
 1  2015-12-31 17:51:03

我將所有內容包裝在IIFE中，以便沒有任何全局變量。

更新示例

重要的是要注意，角度計算為： 

angle = degree * Math.PI / 180;

話雖如此，您可以使用以下方法計算當前度數並將其標准化： 

(angle * (180 / Math.PI)) % 360

我添加了一個名為getValue的函數，該函數帶有一個angle參數： 

function getValue(angle) {
  var degree = (angle * (180 / Math.PI)) % 360,
      offsetIndex = (Math.floor(degree / sweepDegree) + offset) % myData.length,
      normalizedIndex = Math.abs(offsetIndex - (myData.length - 1));

  return myData[normalizedIndex];
}

它實質上是計算當前度數，並考慮動畫初始化時的初始度數（即偏移量）對其進行歸一化。 然后將其除以掃描度，在這種情況下為30，因為有12個項（即360/12 === 30 ）並向下360/12 === 30 。 

var sweepDegree = 360 / myData.length;
var offset = (360 - (angle * (180 / Math.PI)) % 360) / sweepDegree;

這應適用於不同數量的數組項。 換句話說，對於12個項目的固定長度（如您的情況），沒有任何東西會被硬編碼，因此它對於任何給定數量的項目都應該有效。

然后，您可以在mouseover事件偵聽器中簡單地使用getValue函數：

更新示例 

$("#canvas").mouseover(function() {
  // ...
  alert(getValue(angle));
});


 (function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; var PI2 = Math.PI * 2; var myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var cx = 150; var cy = 150; var radius = 150; var wheel = document.createElement('canvas'); var wheelCtx = wheel.getContext('2d'); var indicator = document.createElement('canvas'); var indicatorCtx = indicator.getContext('2d'); var angle = PI2 - PI2 / 4; var sweepDegree = 360 / myData.length; var offset = (360 - (angle * (180 / Math.PI)) % 360) / sweepDegree; var myColor = []; for (var i = 0; i < myData.length; i++) { myColor.push(randomColor()); } makeWheel(); makeIndicator(); requestAnimationFrame(animate); function makeWheel() { wheel.width = wheel.height = radius * 2 + 2; wheelCtx.lineWidth = 1; wheelCtx.font = '40px Pacifico, cursive'; wheelCtx.textAlign = 'center'; wheelCtx.textBaseline = 'middle'; var cx = wheel.width / 2; var cy = wheel.height / 2; var sweepAngle = PI2 / myData.length; var startAngle = 0; for (var i = 0; i < myData.length; i++) { // calc ending angle based on starting angle var endAngle = startAngle + sweepAngle; // draw the wedge wheelCtx.beginPath(); wheelCtx.moveTo(cx, cy); wheelCtx.arc(cx, cy, radius, startAngle, endAngle, false); wheelCtx.closePath(); wheelCtx.fillStyle = myColor[i]; wheelCtx.strokeStyle = 'black'; wheelCtx.fill(); wheelCtx.stroke(); // draw the label var midAngle = startAngle + (endAngle - startAngle) / 2; var labelRadius = radius * .85; var x = cx + (labelRadius) * Math.cos(midAngle); var y = cy + (labelRadius) * Math.sin(midAngle); wheelCtx.fillStyle = 'gold'; wheelCtx.fillText(myData[i], x, y); wheelCtx.strokeText(myData[i], x, y); // increment angle startAngle += sweepAngle; } } function makeIndicator() { indicator.width = indicator.height = radius + radius / 10; indicatorCtx.font = '40px Georgia'; indicatorCtx.textAlign = 'center'; indicatorCtx.textBaseline = 'middle'; indicatorCtx.fillStyle = 'skyblue'; indicatorCtx.strokeStyle = 'blue'; indicatorCtx.lineWidth = 1; var cx = indicator.width / 2; var cy = indicator.height / 2; indicatorCtx.beginPath(); indicatorCtx.moveTo(cx - radius / 8, cy); indicatorCtx.lineTo(cx, cy - indicator.height / 2); indicatorCtx.lineTo(cx + radius / 8, cy); indicatorCtx.closePath(); indicatorCtx.fillStyle = 'skyblue' indicatorCtx.fill(); indicatorCtx.stroke(); indicatorCtx.beginPath(); indicatorCtx.arc(cx, cy, radius / 3, 0, PI2); indicatorCtx.closePath(); indicatorCtx.fill(); indicatorCtx.stroke(); indicatorCtx.fillStyle = 'blue'; indicatorCtx.fillText('Prizes', cx, cy); } function animate(time) { if (ctx === null) { return } ctx.clearRect(0, 0, cw, ch); ctx.translate(cw / 2, ch / 2); ctx.rotate(angle); ctx.drawImage(wheel, -wheel.width / 2, -wheel.height / 2); ctx.rotate(-angle); ctx.translate(-cw / 2, -ch / 2); ctx.drawImage(indicator, cw / 2 - indicator.width / 2, ch / 2 - indicator.height / 2) angle += PI2 / 360; requestAnimationFrame(animate); } function randomColor() { return ('#' + Math.floor(Math.random() * 16777215).toString(16)); } var backup = null; $("#canvas").mouseover(function() { backup = ctx; ctx = null; alert(getValue(angle)); }); $("#canvas").mouseout(function() { ctx = backup; animate(); }); function getValue(angle) { var degree = (angle * (180 / Math.PI)) % 360, offsetIndex = (Math.floor(degree / sweepDegree) + offset) % myData.length, normalizedIndex = Math.abs(offsetIndex - (myData.length - 1)); return myData[normalizedIndex]; } })(); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <canvas id="canvas" width="600" height="600" style="background-color:#ffff"> </canvas>

暫無
暫無

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

相關問題 如何在畫布中使用滾輪移動文本 如何在 canvas 上模擬鼠標滾輪？ 如何基於X和Y坐標從色輪獲取顏色值？ 如何在滾動頁面時禁用畫布元素以劫持鼠標滾輪？ 使用“畫布”將圖像添加到輪子 生成輪子-畫布 如何將觸摸事件添加到HTML5 Canvas色輪？ 如何使用鼠標中輪按鈕拖動 Openseadragon 畫布 從hsl色輪讀取正確的值 如何從此畫布獲取每個圓的坐標
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM