时间戳

首页 > 解决方案 > 如何确定与 JavaScript 中的 for 循环相关的具有十进制值的空间点？

javascript - 如何确定与 JavaScript 中的 for 循环相关的具有十进制值的空间点？

问题描述

我正在研究交互式 pH 谱（碱性和酸性食物图表），我希望用户能够添加两个输入；植物的最低和最高pH值！例如：

我想要做的是绘制一个新的弧线并突出显示选定的区域！

这是我到目前为止所拥有的，但我不知道如何实现这一点，因为我使用ifor 循环来创建这个图表并且i不是十进制的！

var canvasWidth = 700;
var canvasHeight = 400;
var arc_diameter = canvasWidth-100; // 400-100 = 300 
var r = arc_diameter /2; //300/2 = 150
var startPos = 180; //start at 180 degrees (left side of sircle)
var theta = 12.9; // Angle of each arc
var arc_start_at_degree = 180;
var arc_finish_at_degree = 192.9;



let coords = {x: 0, y: 0};
let input1 = 5.2;
let input2 = 6.9;

function setup() {
  //SETUP CANVAS:
  createCanvas(canvasWidth, canvasHeight); //create canvas
  background(220); //set background canvas
  angleMode(DEGREES); //change RADIANS to DEGREES
  translate(width/2, height-50); //Set 0,0 position at center of canvas
  noStroke();
  
  //White Background on Spectrum
  fill(255,255,255);
  arc(0, 0, r*2-25, r*2-25, 180, 360, PIE);
  
  //Draw Levels:
  draw_ph_spectrum();

  //Draw Labels:
  draw_ph_labels();  
  
  //Draw minumum and maximum pH of a plant:
  draw_preferred_ph(input1, input2);
}

function draw_ph_spectrum(){

  var arrayOfColours = [
    color(231,31,49), color(238,82,67), color(238,108,72), color(243,151,110),
    color(247,241,144), color(235,232,65), color(146,203,114), color(43,178,79),
    color(59,165,165), color(43,122,191), color(65,97,172), color(59,84,167),
    color(65,73,158), color(57,49,141)
  ];
  
  for(var i =0; i<14; i++){
    
    fill(arrayOfColours[i]); //Get colour from array
    arc(0, 0, r*2-25, r*2-25, arc_start_at_degree, arc_finish_at_degree-1, PIE);
    
    arc_start_at_degree += theta;
    arc_finish_at_degree += theta;
  }
}

function draw_ph_labels(){
  
  arc_start_at_degree = 180; //reset start point
  textSize(25); //change font size
    
  for(var i=0; i<15; i++){ //0-14  
    
    //convert polar to cartesian coordinates:
    var y = r * sin(arc_start_at_degree);
    var x = r * cos(arc_start_at_degree);
    
    //Apply offsets to justify level labels to arc levels
    if(i<4){ x-=17; y+=5; }
    else if(i<4 || i<7){ x -= 11; y -= 3; }
    else if(i==7){ x-=5; y-=5; }
    else if(i<8 || i<12){ x-=4; y-=3; }
    else { x+=2; y+=2; }

    text(i, x,y); //add text
    
    arc_start_at_degree += theta; //Increase degrees by 12.9
  }
}

function draw_preferred_ph(minValue, maxValue){

  //reset starting point
  arc_start_at_degree = 180;
  
  var y = r * sin(arc_start_at_degree);
  var x = r * cos(arc_start_at_degree);
  
  stroke(0);
  fill(255,255,255,0.5);
  arc(0,0,r*2,r*2,248,268,PIE);
  
  stroke(0);
  strokeWeight(6);
  
  for (let i=0; i < 15; i++) {
    if (Math.trunc(minValue) == i) {
      coords.x = i + (minValue - Math.floor(minValue));
      
    } 
    if (Math.trunc(maxValue) == i) {
      coords.y = i + (maxValue - Math.floor(maxValue));
    } 
  }
}
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

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

标签： javascriptcanvasp5.js

解决方案

你可以做类似的事情。我在一个循环中将 x 和 y 设置为 num1 和 num2 的值。我不完全理解为什么它会有用，但也许它可以帮助你朝着正确的方向前进。

更新：

function draw_preferred_ph(minValue, maxValue){
  //reset starting point
  arc_start_at_degree = 180;  
  var y = r * sin(arc_start_at_degree);
  var x = r * cos(arc_start_at_degree);
  var startDeg = minValue*11.9+180+Math.trunc(minValue);
  var endDeg = maxValue*11.9+180+Math.trunc(maxValue);
  
  stroke(0);
  fill(255,255,255,0.5);
  arc(0,0,r*2,r*2,startDeg,endDeg,PIE);
  
  stroke(0);
  strokeWeight(6);
  
}

推荐阅读