动态缩放画布图 [英] Dynamic Scaling for canvas graphs

问题描述

我目前遇到的问题是将变量缩放为

例如，用户输入一组点，这些点可以是任何数字。我不能总是1：1缩放图每点。想象一下600x600的画布，值（1000,1000）和（1,1）。你将不得不做一些缩放/修改，以决定这些点应该放在图形上。

如何动态缩放这样的数字，让他们坐在合理地方？

解决方案

是的，您可以将源值映射到指定的范围。 p>

此 mapRange 函数可让您将1000x1000个值缩放/映射到600x600画布 / p>

  //给定低，高值的源（1000,1000）
 //给定低，高值映射的数字（600,600）
 //并给出一个值以从源映射到目标范围（值）
 //将源值映射到指定范围
 
函数mapRange（value，sourceLow，sourceHigh，mappedLow，mappedHigh）{
 
 return mappedLow +（mappedHigh- mappedLow）* 
（value- sourceLow）/（sourceHigh- sourceLow）; 
 
} 
  

I'm working on a canvas JS application to facilitate graphing, it's a personal project.

An issue I'm having trouble with currently is scaling of variables to display visually.

for example, users enter a set of points, these can be any number. I cannot always 1:1 scale graph every-point. Imagine a canvas of 600x600 and values of (1000,1000) and (1,1). you would have to do some scaling/modification to decide where these points should be put on the graph.

How can one dynamically scale numbers like this and have them sit in reasonable places? Are there common approaches to solving this problem?

解决方案

Yes, you can "map" source values into a designated range.

This mapRange function allows you to scale/map your 1000x1000 values into your 600x600 canvas

// Given low,high values of the source(1000,1000)
// Given low,hight values of the mapped numbers (600,600)
// and given a value to map from the source to the destination range (value)
// map the source value into a designated range

function mapRange(value, sourceLow, sourceHigh, mappedLow, mappedHigh){

    return mappedLow + (mappedHigh - mappedLow) * 
           (value - sourceLow) / (sourceHigh - sourceLow);

}

这篇关于动态缩放画布图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！