如何使用 Easel.js 在画布中创建数据库图标
How do I create a Database Icon in Canvas using Easel.js
我正在尝试使用Easel.js在画布上创建一个可重新调整大小的数据库图标。我想出了如何创建基础圆柱体,但无法找出堆栈的曲线。数据库图标应类似于以下链接:
http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Data-Database-icon.png
我已经开始在下面的JSFiddle上创建图标:http://jsfiddle.net/rsperlazza/u6Uaq/
var stage = new createjs.Stage($("#test")[0]);
stage.enableMouseOver(50);
stage.canvas.width = 500;
stage.canvas.height = 500;
var shape = new createjs.Shape();
var g = shape.graphics;
var x = 50;
var y = 100;
var width = 100;
var height = 120;
g.beginStroke("red");
g.beginFill("black");
g.drawEllipse(x, y, width, height / 4);
g.moveTo(x, y + height / 8);
g.lineTo(x, y + 7 * height / 8);
g.moveTo(x, y + height / 8);
g.lineTo(x, y + 7 * height / 8);
g.drawEllipse(x, y + 3 * height / 4, width, height / 4);
g.endStroke();
g.drawRect(x, y + height / 8, width, 3 * height / 4);
stage.addChild(shape);
stage.update();
我建议看看Flash CS6或Flash CC的Toolkit for CreateJS面板。您可以根据需要创建尽可能复杂的形状,它会将其导出。您必须为Flash CS6(http://www.adobe.com/ca/products/flash/flash-to-html5.html(下载它,但它带有较新的版本。
另一种简单的方法是 drawscri.pt 和Illustrator面板,它将矢量导出为各种格式,包括EaselJS图形。请注意,它不会有完整的 Illustrator 矢量支持,但它做得很好。http://drawscri.pt/
相关文章:
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 如何在Parse中创建一对多关系
- 我想在AngularJS应用程序中创建一个输入数字框,用户不应该在该框上键入十进制数字.(一个整数输入框)
- 如何使用JQuery在HTML中创建包含字符串参数的引号的onclickjavascript链接
- 在三个.js中创建球体(例如地球)的磁力线
- 在javascript中的xml中创建一个链接
- 如何在javascript中创建自定义事件
- 在经过DATE验证的列中创建null值
- 如何在javascript中创建动态json对象
- 文本表示法VS.构造函数,用于在JavaScript中创建对象
- 在angularjs中创建自定义控件的推荐方法
- 字符串中的
标记未正确在 HTML 中创建新行 - 在量角器中创建一个.txt错误输出文件是手动的,而不是控制台错误
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 在javascript中创建数组,而不是if.else
- 如何在 JavaScript 中创建输入文本框
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何在JavaScript中创建打字机效果,这将考虑html标记规则
- 在节点中创建文件全局变量
- 如何在剑道UI中创建类转换效果