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

时间:2016-08-21 14:29:38

标签: javascript css html5 canvas easeljs

嘿我正在尝试使用库在EaselJS创建以下图片:

enter image description here

我的图片组件是:

  1. 两个圆圈 - 黄色和红色以及浅绿色背景
  2. 几个小黑点
  3. 从0到1的坐标系,其中包含所有必要的标签。
  4. 我已经成功实现了第一个目标:创建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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:2)

以下是一个非常快速的示例,展示如何绘制数据: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

处理实际的图形轴&amp;标签,您可以使用许多方法,包括画布内和画布外(HTML DOM)。如果您对此有任何具体问题,请随时发布后续问题 - 但我建议您先尝试构建一些内容,就像使用图表一样。

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