2012年08月04日

Adobe Illustratorから形状のソースコードを書き出す(3) @ Mac

img1

Adobe Illustratorからパスデータを書き出すスクリプトを書いたついでに、グラデーションデータをスタイルシートに書き出すスクリプトも書いてみました。

グラデーションの設定をしたパスを選んだ状態で以下のスクリプトを実行すれば、クリップボードにスタイルシートの記述をコピーします。

ただ、これはまだ不完全なので、使用する場合は、自己責任でお願いします。クリップボードに入れる方法が、ウェブブラウザで行う方法が使えなかったので、ドキュメントを生成して、結果をテキストで追加し、それをコピーする形で実現してます。これが最善の方法かどうかも分からないので良い方法があれば教えてください。

次に、グラデーションに角度が付いている場合の対応が不完全。一部、Chrome 9以前の記述の所だけ対応してます。0度以外の時に座標が入る様にしてますが、90度などは未対応。正しいかどうかも不明(笑)

var results = "";

obj=activeDocument.selection[0];

if(obj.fillColor.typename == "GradientColor"){
	ff36_css(obj);
	chrome_css(obj);
	chrome10_css(obj);
	opera_css(obj);
	ie_css(obj);
	w3c_css(obj);
	ie6_9_css(obj);
}

var docRef = documents.add();
var textRef1 = docRef.textFrames.add(); 
textRef1.contents = results; 
textRef1.top = 100;
textRef1.left = 0;
textRef1.selected = true;
copy();
aiDocument = app.activeDocument; 
aiDocument.close( SaveOptions.DONOTSAVECHANGES ); 
aiDocument = null;
alert("クリップボードにコピーしました。");


function toHexColor(color){
	var red		= parseInt(color.red);
	var green	= parseInt(color.green);
	var blue	= parseInt(color.blue);
	
	return "#" + red.toString(16)+green.toString(16)+ blue.toString(16);
}
/* FF3.6+ */
function ff36_css(obj){
	results += "background: -moz-linear-gradient(left,";
	rgba_ramp(obj);
	results +=");/* FF3.6+ */\r";
}
/* Chrome,Safari4+ */
function chrome_css(obj){
	
	results += "background-image: -webkit-gradient(linear,";
	
	
	if(obj.fillColor.angle == 0){
		results += "left top, right top,";
	}else{
	 	var startPointX = obj.fillColor.origin[0];
	 	var startPointY = obj.fillColor.origin[1]*-1;
	 	results +=startPointX + "," + startPointY +",\r";

		var r = obj.fillColor.angle * (Math.PI / 180);
		
		w = Math.cos(r) * obj.fillColor.length;
		h = Math.sin(r) * obj.fillColor.length;
	
		var endPointX = startPointX + w;
		var endPointY = startPointY - h;	
	 	results +=endPointX + "," + endPointY +",\r";
 	}
	
	var stopLength = obj.fillColor.gradient.gradientStops.length;
	var colorStopArray = new Array;
	for(var i=0;i

閲覧数: 1598 / はてなブックマークusers

blog comments powered by Disqus

関連日記

アマゾン広告

この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。

▼日記検索

Mac

Shade

3D

Flash

ゲーム

ウェブ

音楽

映画

デジカメ

Windows

Linux

携帯電話

テレビ

広島

電子工作

iOS

▼ 最近のトラックバック

▼ランキング

▼関連サイト