如何使用Easel.js在畫布中創建數據庫圖標

Question

我正嘗試使用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(); 

Answer 1

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