2012年08月04日
Adobe Illustratorから形状のソースコードを書き出す(3) @ Mac
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
関連日記
- 2005年04月11日 テキストウェブブラウザLynx (6026)@ Mac
- 2008年01月16日 auのパケット通信料 (5563)@ 携帯電話
- 2010年02月10日 ウェブページ制作ツール「Flux」 (5138)@ Mac
- 2008年02月21日 テキストエリアのリサイズ (5013)@ ウェブ
- 2008年12月13日 Javascirpt製マークアップ・エディター「SmartMarkUP」 (4557)@ ウェブ
- 2012年04月26日 Dreamweaver CS6 の可変グリッドレイアウト (4474)@ ウェブ
- 2007年01月08日 FireBug (4345)@ Mac
- 2005年06月24日 Adobe Creative Suite 2 (4298)@ Mac
- 2007年07月12日 10.4にw3mをインストール (4254)@ Mac
- 2007年09月25日 Spry XMLDataSetで表示数の制限2 (4244)@ Mac
- 2013年05月07日 Fireworksの未来? (4137)@ ウェブ
- 2010年07月08日 iPhone site extension for Dreamweaver CS4/5 (3960)@ ウェブ
- 2009年10月11日 CSS : -webkit-border-image (3932)@ ウェブ
- 2012年04月24日 Adobe CS6(ウェブ関連) (3848)@ ウェブ
- 2004年12月10日 このページは自治体としてどうなのよ? (3825)@ ウェブ
- 2011年08月22日 TwitterのGridデザインCSS「Bootstrap」 (3723)@ ウェブ
- 2011年02月16日 Wordpressに外部CSSやJSファイルを読み込む (3711)@ ウェブ
- 2006年04月22日 Dreamweaver 8のページプロパティ (3641)@ Mac
- 2006年01月27日 MX Kollectionでフォームの入力チェック (3550)@ Mac
- 2012年11月23日 HTML制作環境を刷新(2) Compassも使ってみる (3413)@ ウェブ
- 2008年11月28日 中国語キャラセットで日本語ページ (3331)@ ウェブ
- 2012年11月18日 HTML制作環境を刷新 (3234)@ ウェブ
- 2010年06月14日 Dreamweaver CS5とCSSフレームワーク (3132)@ ウェブ
- 2005年08月17日 MX Kollection 3、自分には合わない (2965)@ Mac
- 2012年10月10日 LESSからSCSSへ乗り換えか? (2942)@ ウェブ
- 2007年11月12日 Flex 2 Style Explorer (2817)@ Flash
- 2009年07月02日 良い所取りのCSSフレームワーク (2718)@ ウェブ
- 2012年03月16日 ウェブサイトのRetina対応 (2702)@ ウェブ
- 2010年07月10日 Dreamweaver CS5でCSS (2606)@ Mac
- 2013年05月11日 TexturePacker その1 (2584)@ Mac
アマゾン広告
この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。
