使用 EaselJS 围绕 Canvas 构建坐标系
Build a Coordinate System around Canvas Using EaselJS
嘿,我正在尝试使用库在 canvas 中构建以下图片:EaselJS。
我的图片组件是:
- 两个圆圈 - 黄色和红色以及浅绿色背景
- 几个小黑点
- 一个从 0 到 1 的坐标系,带有图片中出现的所有必要标签。
我已经成功实现了第一个目标:创建 2 个圆圈并将它们放在 canvas 的右上角。第二个目标,尤其是第三个目标(建筑坐标系)在我看来是不可能完成的任务。
我在 EaselJS 的 API 中搜索了关于如何创建这种结构的任何线索
并且没有任何信息可以帮助我实现我的第三个目标。
我附上目前已构建的 canvas 的代码:
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>
这是一个非常快速的示例,展示了如何绘制数据:http://jsfiddle.net/lannymcnie/g8cLkg8e/
我输入了一个非常简单的数据集 x/y "values":
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
要处理实际的图表轴和标签,您可以使用多种方法,包括 canvas 和 canvas 之外的方法(HTML DOM).如果您对此有具体问题,请随时 post 提出后续问题 - 但我建议您先尝试构建一些东西,就像您对图表所做的那样。
需要注意一点:将图形作为容器使用会更容易,因此您可以在一定尺寸内绘制它,使用标准化位置(从 0 开始),然后移动容器。
嘿,我正在尝试使用库在 canvas 中构建以下图片:EaselJS。
我的图片组件是:
- 两个圆圈 - 黄色和红色以及浅绿色背景
- 几个小黑点
- 一个从 0 到 1 的坐标系,带有图片中出现的所有必要标签。
我已经成功实现了第一个目标:创建 2 个圆圈并将它们放在 canvas 的右上角。第二个目标,尤其是第三个目标(建筑坐标系)在我看来是不可能完成的任务。 我在 EaselJS 的 API 中搜索了关于如何创建这种结构的任何线索 并且没有任何信息可以帮助我实现我的第三个目标。 我附上目前已构建的 canvas 的代码:
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>
这是一个非常快速的示例,展示了如何绘制数据:http://jsfiddle.net/lannymcnie/g8cLkg8e/
我输入了一个非常简单的数据集 x/y "values":
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
要处理实际的图表轴和标签,您可以使用多种方法,包括 canvas 和 canvas 之外的方法(HTML DOM).如果您对此有具体问题,请随时 post 提出后续问题 - 但我建议您先尝试构建一些东西,就像您对图表所做的那样。
需要注意一点:将图形作为容器使用会更容易,因此您可以在一定尺寸内绘制它,使用标准化位置(从 0 开始),然后移动容器。