如何使用 Easel.js 在画布中创建数据库图标

How do I create a Database Icon in Canvas using Easel.js

本文关键字:布中 创建 数据库 图标 何使用 Easel js      更新时间:2023-09-26

我正在尝试使用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/