2013-10-11 54 views
1

我正尝试使用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(); 

回答

0

我建议在任的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/

相关问题