使用 EaselJS 围绕画布构建坐标系答案

【问题标题】：Build a Coordinate System around Canvas Using EaselJS使用 EaselJS 围绕画布构建坐标系
【发布时间】：2016-12-28 03:58:39
【问题描述】：

嘿，我正在尝试使用库在画布中构建以下图片：EaselJS。

我的图片组件是：

两个圆圈 - 黄色和红色以及浅绿色背景
几个小黑点
一个从 0 到 1 的坐标系，其中包含图片中出现的所有必要标签。

我已经成功实现了第一个目标：创建 2 个圆圈并将它们放置在画布的右上角。第二个目标，尤其是第三个目标（建立坐标系）在我看来是不可能完成的任务。我已经在 EaselJS 的 API 中搜索了有关如何创建这种结构的任何线索并且没有任何信息可以帮助我实现第三个目标。我附上了到目前为止已经构建的画布的代码：

 function init() {
        var stage = new createjs.Stage("demoCanvas");
        var circle1 = new createjs.Shape();
        var circle2 = new createjs.Shape();
        circle2.graphics.beginFill("yellow").drawCircle(0, 0, 300);
        circle2.x = 500;
        circle2.y = 0;
        stage.addChild(circle2);
        circle1.graphics.beginFill("red").drawCircle(0, 0, 150);
        circle1.x = 500;
        circle1.y = 0;
        stage.addChild(circle1);
        stage.update();
   }

#demoCanvas{
  background-color: #32CD32;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<body onload="init();">
    <canvas id="demoCanvas" width="500" height="500"></canvas>
  </body>

【问题讨论】：

标签： javascript css html canvas easeljs

【解决方案1】：

这是一个非常快速的示例，展示了如何绘制数据：http://jsfiddle.net/lannymcnie/g8cLkg8e/

我输入了一个非常简单的 x/y“值”数据集：

var data = [
  [0,0.4],
  [0.8, 0.8],
  [0.9, 0.4],
  [0.75, 0.25],
  [0.95, 0.1]
];

然后为每个数据点创建一个数据点。定位是使用 0-1 范围的简单数学运算：

p.x = d[0] * GRAPH_WIDTH;
// The y-position is subtracted from the height because 0 is at the bottom
p.y = GRAPH_HEIGHT - d[1] * GRAPH_HEIGHT;

这是一个简单的数学运算，因为您的范围只是 0-1。如果您有更复杂（或动态范围），您可以使用：

value = (MAX - VALUE) / (MAX - MIN) * GRAPH_WIDTH;
// For example, to get an x-value of 1.5 in a range of 1-2 (instead of 0-1):
xPosition = (2 - 1.5) / (2 - 1) * GRAPH_WIDTH
// OR
xPosition = 0.5 / 1 * 500 = 250px

要处理实际的图形轴和标签，您可以使用多种方法，包括画布内和画布外 (HTML DOM)。如果您对此有具体问题，请随时发布后续问题 - 但我建议您先尝试构建一些东西，就像您对图表所做的那样。

需要注意的一点：将图形用作容器会更容易，因此您可以在一定大小内绘制它，使用标准化位置（从 0 开始），然后移动容器。

【讨论】：

我开了一个新的讨论，更新后：stackoverflow.com/questions/39189081/…