在坐标System Easeljs上定位标签 [英] Position Labels on a coordinate System Easeljs
本文介绍了在坐标System Easeljs上定位标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
嘿，我试图使用库在画布中创建以下图片：
我的图片组件是：
- 两个圆圈 - 黄色和红色以及浅绿色背景
- 一个坐标系，从0到1，包含图片中显示的所有必需标签。 li>
我成功了我的两个目标。
我建立了一个基于stackoverflow讨论的协调系统：
如何用Easeljs绘制一个完整的坐标系？。
我有两个主要问题， p>
- 我需要绘制一个适合坐标系统的矩形（或正方形），当前矩形只是背景。
- 此外，我需要添加3个标签：x轴上的关键指数，y轴上的长期严重性指数和长期的标题。
如果有人可以帮助我解决这个问题，我会很高兴。
我添加了源代码：
$（function（）{var stage = new createjs.Stage（'canvas2d'）; var circle1 = new createjs.Shape var circle2 = new createjs.Shape（）; var rect = new createjs.Rectangle（0,0,100,100）; 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.addChild（rect）; stage.update（）; var coord_xaxis = new createjs.Shape（）; stage.addChild（coord_xaxis）; var coord_yaxis = new createjs.Shape（）; stage.addChild （coord_yaxis）; var coord_arrow_x = new createjs.Shape（）; // stage.addChild（coord_arrow_x）; var coord_arrow_y = new createjs.Shape（）; // stage.addChild（coord_arrow_y）; var coord_xaxis_lines = new createjs.Shape ）; stage.addChild（coord_xaxis_lines）; var coord_yaxis_lines = new createjs.Shape（）; stage.addChild（coord_yaxis_lines）; / ** $（'＃canvas2d'）。width（）/ 15 ** / var axis_center_x = $ '＃canvas2d'）width（）/ 15; var axis_center_y = $（'＃canvas2d'）。height（）/1.10; var xaxis_width = $（' canvas2d'）width（）; var yaxis_width = $（'＃canvas2d'）。height（） - 0.05 * $（'＃canvas2d'）。height（）; var axis_start_x = （）-xaxis_width）/ 2; var axis_start_y =（$（'＃canvas2d'）。height（） - yaxis_width）/ 6; var axis_strokewidth = 2; coord_xaxis.graphics.setStrokeStyle（axis_strokewidth，'round'）。beginStroke ＃000'）; coord_xaxis.graphics.moveTo（axis_start_x，axis_center_y）.lineTo（axis_start_x + xaxis_width，axis_center_y）; coord_yaxis.graphics.setStrokeStyle（axis_strokewidth，'round'）。beginStroke（'＃000'）; coord_yaxis.graphics。 moveTo（axis_center_x，axis_start_y）.lineTo（axis_center_x，axis_start_y + yaxis_width）; //绘制x-axisvar arrwidth = 5的坐标箭头; var arrxtnd = 5; coord_arrow_x.graphics.beginFill（'＃000'）; coord_arrow_x.graphics。 setStrokeStyle（axis_strokewidth，'round'）。beginStroke（'＃000'）; coord_arrow_x.graphics.moveTo（axis_center_x，axis_start_y-arrwidth / 2）.lineTo（axis_center_x + arrwidth，axis_start_y + arrwidth + arrxtnd）.lineTo（axis_center_x-arrwidth ，axis_start_y + arrwidth + arrxtnd）.lineTo（axis_center_x，axis_start_y-arrwidth / 2）; coord_arrow_x.graphics.endFill（）; //绘制y-axiscoord_arrow_y.graphics.beginFill（'＃000'）; coord_arrow_y.graphics .beginStroke（'＃000'）; coord_arrow_y.graphics.moveTo（axis_start_x + xaxis_width + arrwidth / 2，axis_center_y）.lineTo（axis_start_x + xaxis_width-arrwidth-arrxtnd，axis_center_y + arrwidth）.lineTo（axis_start_x + xaxis_width-arrwidth-arrxtnd ，axis_center_y-arrwidth）.lineTo（axis_start_x + xaxis_width + arrwidth / 2，axis_center_y）; coord_arrow_y.graphics.endFill（）; var stepdist = xaxis_width / 5.25; var steplinew = 6; // 10 horizontal linesvar xlines = 10; var labels_x = []; for（var i = xlines; i> = 0; i--）{// little black marker coord_yaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃000'）; coord_yaxis_lines.graphics.moveTo（axis_center_x-steplinew，axis_center_y +（ - i / 2）* stepdist）.lineTo（axis_center_x + steplinew，axis_center_y +（ - i / 2）* stepdist）; // labels labels_x [i] = new createjs.Text（'x'，'14px Arial'，'＃333'）; labels_x [i] .x = axis_center_x-12; labels_x [i] .y = axis_center_y +（ - i / 2）* stepdist-6; // move up a bit stage.addChild（labels_x [i]）; labels_x [i] .text =（i / 10）; labels_x [i] .textAlign ='right';} // 12个正交线var stepdist2 = xaxis_width / 6.5; var steplinew2 = 6; var ylines = 10; var labels_y = []; for（var i = ylines; i> = 1; i--）{//不覆盖y轴线//小黑标记coord_xaxis_lines.graphics .setStrokeStyle（1，'round'）。beginStroke（'＃000'）; coord_xaxis_lines.graphics.moveTo（axis_center_x +（i / 1.6）* stepdist2，axis_center_y-steplinew2）.lineTo（axis_center_x +（i / 1.6）* stepdist2，axis_center_y + steplinew2）; // labels labels_y [i] = new createjs.Text（'x'，'14px Arial'，'＃333'）; labels_y [i] .x = axis_center_x +（i / 1.6）* stepdist2; //向上移一个labels_y [i] .y = axis_center_y + 12; stage.addChild（labels_y [i]）; labels_y [i] .text =（i / 10）; labels_y [i] .textAlign ='center';} stage.update（）; }）
＃canvas2d {background-color：＃32CD32; }
< script src =https：// code .createjs.com / createjs-2015.11.26.min.js>< / script>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery。 min.js>< / script>< canvas id =canvas2dwidth =500height =500>< / canvas>
解决方案
在EaselJS中创建矩形的语法与创建圆形相同。区别在于在图形中调用 drawRect 而不是 drawCircle > chain。
我添加了一个包含任意位置和大小值的矩形，以匹配您的整体代码风格，因为我找不到任何标准。我也删除了CSS上的背景颜色。
至于在每个轴上添加标签，我强烈建议您使用DOM。 EaselJS对文本的支持几乎是不可用的。即使EaselJS本身也建议您使用 DOMElement 而不是 Text DisplayObj 。更多 DOMElement 这里 。
我个人认为，通过使用纯DOM而不是画布工作，可以更容易得到你想要的结果，除非你做一些沉重的用户 - 基于互动的动画作品。
$（function new createjs.Stage（'canvas2d'）; var circle1 = new createjs.Shape（）; var circle2 = new createjs.Shape（）; var rect = new createjs.Shape（）; rect.graphics.f（green） .drawRect（33，0，500，455）; stage.addChild（rect）; 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 （）; var coord_xaxis = new createjs.Shape（）; stage.addChild（coord_xaxis）; var coord_yaxis = new createjs.Shape（）; stage.addChild（coord_yaxis）; var coord_arrow_x = new createjs.Shape .addChild（coord_arrow_x）;无功coord_arrow_y =新createjs.Shape（）; // stage.addChild（coord_arrow_y）;无功coord_xaxis_lines =新createjs.Shape（）; stage.addChild（coord_xaxis_lines）;无功coord_yaxis_lines =新createjs.Shape（ ）; width（）/ 15; var axis_center_y = $（'canvas2d'）; width（）/ 15 ** / var axis_center_x = $（'＃canvas2d'）; stage.addChild（coord_yaxis_lines）; / ** $ '＃canvas2d'）。height（）/ 1.10; var xaxis_width = $（'＃canvas2d'）。width（） - 0.05 * $（'＃canvas2d'）。 ）.height（） - 0.05 * $（'＃canvas2d'）。height（）; var axis_start_x =（$（'＃canvas2d'）。width（） - xaxis_width）/ 2; var axis_start_y = '）.height（） - yaxis_width）/ 6; VAR axis_strokewidth = 2; coord_xaxis.graphics.setStrokeStyle（axis_strokewidth，'圆＃000'）; coord_xaxis.graphics.moveTo（axis_start_x，axis_center_y）.lineTo'）beginStroke（。 （axis_start_x + xaxis_width，axis_center_y）; coord_yaxis.graphics.setStrokeStyle（axis_strokewidth，'圆'）beginStroke（'＃000'）; coord_yaxis.graphics.moveTo（axis_center_x，axis_start_y）.lineTo（axis_center_x，axis_start_y + yaxis_width）; / /画的CoordSys箭头进行X axisvar arrwidth = 5;无功arrxtnd = 5; coord_arrow_x.graphics.beginFill（'＃000'）; coord_arrow_x.graphics.setStrokeStyle（axis_strokewidth，'圆'）beginStroke（'＃000'）。 coord_arrow_x.graphics.moveTo（axis_center_x，axis_start_y-arrwidth / 2）.lineTo（axis_center_x + arrwidth，axis_start_y + arrwidth + arrxtnd）.lineTo（axis_center_x-arrwidth，axis_start_y + arrwidth + arrxtnd）.lineTo（axis_center_x，axis_start_y-arrwidth / 2 ）; coord_arrow_x.graphics.endFill（）; //绘制y-axiscoord_arrow_y.graphics.beginFill（'＃000'）; coord_arrow_y.graphics.beginStroke（'＃000'）; coord_arrow_y.graphics.moveTo（axis_start_x + xaxis_width + arrwidth / 2，axis_center_y）.lineTo（axis_start_x + xaxis_width-arrwidth-arrxtnd，axis_center_y + arrwidth）.lineTo（axis_start_x + xaxis_width-arrwidth-arrxtnd，axis_center_y-arrwidth）.lineTo（axis_start_x + xaxis_width + arrwidth / 2，axis_center_y ）; coord_arrow_y.graphics.endFill（）; var stepdist = xaxis_width / 5.25; var steplinew = 6; // 10 horizontal linesvar xlines = 10; var labels_x = []; for（var i = xlines; i& - ）{// small black marker coord_yaxis_lines.graphics.setStrokeStyle（1，'round'）。beginStroke（'＃000'）; coord_yaxis_lines.graphics.moveTo（axis_center_x-steplinew，axis_center_y +（ - i / 2）* stepdist）.lineTo（axis_center_x + steplinew，axis_center_y +（ - i / 2）* stepdist）; // labels labels_x [i] = new createjs.Text（'x'，'14px Arial'，'＃333'）; labels_x [i] .x = axis_center_x-12; labels_x [i] .y = axis_center_y +（ - i / 2）* stepdist-6; // move up a bit stage.addChild（labels_x [i]）; labels_x [i] .text =（i / 10）; labels_x [i] .textAlign ='right';} // 12个正交线var stepdist2 = xaxis_width / 6.5; var steplinew2 = 6; var ylines = 10; var labels_y = []; for（var i = ylines; i> = 1; i--）{//不覆盖y轴线//小黑标记coord_xaxis_lines.graphics .setStrokeStyle（1，'round'）。beginStroke（'＃000'）; coord_xaxis_lines.graphics.moveTo（axis_center_x +（i / 1.6）* stepdist2，axis_center_y-steplinew2）.lineTo（axis_center_x +（i / 1.6）* stepdist2，axis_center_y + steplinew2）; // labels labels_y [i] = new createjs.Text（'x'，'14px Arial'，'＃333'）; labels_y [i] .x = axis_center_x +（i / 1.6）* stepdist2; //向上移一个labels_y [i] .y = axis_center_y + 12; stage.addChild（labels_y [i]）; labels_y [i] .text =（i / 10）; labels_y [i] .textAlign ='center';} stage.update（）; }）
< script src =https：// code.createjs.com/createjs-2015.11.26.min.js\"> ;</script><script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>< canvas id =canvas2dwidth =500height =500>< / canvas>
Hey I am trying to build the following picture in canvas using the library:EaselJS.
My Picture components are:
- two circles - yellow and red and a light green background
- a coordinate system from 0 to 1 with all the necessary labels which appear in the picture.
I have succeeded in my two goals. I have build a Coordinate System based on stackoverflow discussion: How to draw a full coordinate system with Easeljs?.
I have left with 2 main problems which concern me a lot:
- I need to draw a rectangle(or square) which fits the coordinate system, the current rectangle is just a background.
- Also I need to add 3 labels: 'Critical Index' on the x axis, 'Long-term Severity Index' on the y axis and a headline of Long-term.
I would happy if someone could help me with this issues I am adding the source code:
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Rectangle(0, 0, 100, 100);
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.addChild(rect);
stage.update();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})
#canvas2d{
background-color: #32CD32;
}
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>
解决方案
The syntax for creating a rectangle in EaselJS is just the same as making a circle. The difference lies when calling drawRect instead of drawCircle in the graphics chain.
I've added a rectangle with arbitrary position and size values to match your overall code style, and because I couldn't find any criteria quickly. I also removed the background color on the CSS.
As for the addition of labels on each axis, I highly recommend you to use DOM instead. EaselJS support for text is almost unusable. Even EaselJS itself recommends you to use a DOMElement instead of the Text DisplayObj. More on DOMElement here.
Personally, I think it would be a lot easier to get to your desired result by using pure DOM instead of canvas work, unless you're doing some heavy user-interaction-based animation stuff.
$(function(){
var stage = new createjs.Stage('canvas2d');
var circle1 = new createjs.Shape();
var circle2 = new createjs.Shape();
var rect = new createjs.Shape();
rect.graphics.f("green").drawRect(33, 0, 500, 455);
stage.addChild(rect);
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();
var coord_xaxis = new createjs.Shape();
stage.addChild(coord_xaxis);
var coord_yaxis = new createjs.Shape();
stage.addChild(coord_yaxis);
var coord_arrow_x = new createjs.Shape();
//stage.addChild(coord_arrow_x);
var coord_arrow_y = new createjs.Shape();
//stage.addChild(coord_arrow_y);
var coord_xaxis_lines = new createjs.Shape();
stage.addChild(coord_xaxis_lines);
var coord_yaxis_lines = new createjs.Shape();
stage.addChild(coord_yaxis_lines);
/**$('#canvas2d').width()/15**/
var axis_center_x = $('#canvas2d').width()/15;
var axis_center_y = $('#canvas2d').height()/1.10;
var xaxis_width = $('#canvas2d').width()-0.05*$('#canvas2d').width();
var yaxis_width = $('#canvas2d').height()-0.05*$('#canvas2d').height();
var axis_start_x = ($('#canvas2d').width()-xaxis_width)/2;
var axis_start_y = ($('#canvas2d').height()-yaxis_width)/6;
var axis_strokewidth = 2;
coord_xaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_xaxis.graphics.moveTo(axis_start_x, axis_center_y).lineTo(axis_start_x+xaxis_width, axis_center_y);
coord_yaxis.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_yaxis.graphics.moveTo(axis_center_x, axis_start_y).lineTo(axis_center_x, axis_start_y+yaxis_width);
// draw coordsys arrow for x-axis
var arrwidth = 5;
var arrxtnd = 5;
coord_arrow_x.graphics.beginFill('#000');
coord_arrow_x.graphics.setStrokeStyle(axis_strokewidth,'round').beginStroke('#000');
coord_arrow_x.graphics.moveTo(axis_center_x, axis_start_y-arrwidth/2).lineTo(axis_center_x+arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x-arrwidth, axis_start_y+arrwidth+arrxtnd).lineTo(axis_center_x, axis_start_y-arrwidth/2);
coord_arrow_x.graphics.endFill();
// draw coordsys arrow for y-axis
coord_arrow_y.graphics.beginFill('#000');
coord_arrow_y.graphics.beginStroke('#000');
coord_arrow_y.graphics.moveTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y+arrwidth).lineTo(axis_start_x+xaxis_width-arrwidth-arrxtnd, axis_center_y-arrwidth).lineTo(axis_start_x+xaxis_width+arrwidth/2, axis_center_y);
coord_arrow_y.graphics.endFill();
var stepdist = xaxis_width/5.25;
var steplinew = 6;
// 10 horizontal lines
var xlines = 10;
var labels_x = [];
for(var i=xlines;i>=0;i--) {
// little black marker
coord_yaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_yaxis_lines.graphics.moveTo(axis_center_x-steplinew, axis_center_y+(-i/2)*stepdist).lineTo(axis_center_x+steplinew, axis_center_y+(-i/2)*stepdist);
// labels
labels_x[i] = new createjs.Text('x', '14px Arial', '#333');
labels_x[i].x = axis_center_x-12;
labels_x[i].y = axis_center_y+(-i/2)*stepdist-6; // move up a bit
stage.addChild(labels_x[i]);
labels_x[i].text = (i/10);
labels_x[i].textAlign = 'right';
}
// 12 orthogonal lines
var stepdist2 = xaxis_width/6.5;
var steplinew2 = 6;
var ylines = 10;
var labels_y = [];
for(var i=ylines;i>=1;i--) {
// dont overdraw y-axis-line
// little black marker
coord_xaxis_lines.graphics.setStrokeStyle(1,'round').beginStroke('#000');
coord_xaxis_lines.graphics.moveTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y-steplinew2).lineTo(axis_center_x+(i/1.6)*stepdist2, axis_center_y+steplinew2);
// labels
labels_y[i] = new createjs.Text('x', '14px Arial', '#333');
labels_y[i].x = axis_center_x+(i/1.6)*stepdist2; // move up a bit
labels_y[i].y = axis_center_y+12;
stage.addChild(labels_y[i]);
labels_y[i].text = (i/10);
labels_y[i].textAlign = 'center';
}
stage.update();
})
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas2d" width="500" height="500"></canvas>
这篇关于在坐标System Easeljs上定位标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
