グラデーションを使ってみよう。

Apple Scriptでグラデーションを扱いたいと思い、基本的なやり方をまとめてみた。

 

（今回使用したコードの参考資料ページ）

・NSImageView (https://applescript.web.fc2.com/reference2022/reference_NSImageView.html)

・NSImage (https://applescript.web.fc2.com/reference2022/reference_NSImage.html)

・NSGradient (https://applescript.web.fc2.com/reference2022/reference_NSGradient.html)

・NSBezierPath (https://applescript.web.fc2.com/reference2022/reference_NSBezierPath.html)

 

グラデーション（１）長方形内に直線的なグラデーションを作成

-- |カレントアプリケーションの登録| set myApp to current application -- |イメージビュー(NSImageView)の設置| set theRect to theWindow's contentView()'s frame() -- メインウインドウ(theWindow)の表示可能部分全面のサイズを取得 set imageView1 to myApp's class "NSImageView"'s alloc()'s initWithFrame:theRect --オブジェクトを作成 tell imageView1 setImageFrameStyle_(myApp's NSImageFrameNone) -- フレームの表示は無し setImageAlignment_(myApp's NSImageAlignCenter) -- イメージをフレーム内の中心に表示 setImageScaling_(myApp's NSImageScaleNone) -- イメージの拡大縮小はしない end tell theWindow's contentView()'s addSubview:imageView1 -- theWindowに作ったイメージビューを貼り付け -- |グラデーションを作成して表示| set {x, y, w, h} to {0, 0, 500, 300} set theSize to myApp's NSMakeSize(w, h) set anImage to myApp's class "NSImage"'s alloc()'s initWithSize:theSize -- 画像(NSImage)を作成 anImage's lockFocus() -- 画像の編集を開始 set aColor1 to myApp's class "NSColor"'s yellowColor() -- aColor1を黄色として登録 set aColor2 to myApp's class "NSColor"'s redColor() -- aColor2を赤色として登録 set theGradient to myApp's class "NSGradient"'s alloc()'s initWithStartingColor:aColor1 endingColor:aColor2 --aColor1・aColor2からグラデーションを作成 set theRect to myApp's NSMakeRect(x, y, w, h) set aAngle to 0 -- 角度用(中心から真右が0度で、数字が増えると反時計回りに回転する) theGradient's drawInRect:theRect angle:aAngle -- theRectの大きさの長方形に、aAngleの角度でグラデーションを描画 anImage's unlockFocus() -- 画像の編集を終了 -- imageView1's setImage:anImage --画像をイメージビューに表示させる

 

 

 

グラデーション（２）イメージビューの中心に円形のグラデーションを作成

　※ グラデーション(1)の黄色い地の部分のみを編集(以下同様)

anImage's lockFocus() set startPoint to myApp's NSMakePoint(w / 2, h / 2) --１つ目の円の中心位置 set startRadius to 20 --１つ目の円の大きさ set aColor1 to myApp's class "NSColor"'s yellowColor() --１つ目の円の色(黄色) set endPoint to myApp's NSMakePoint(w / 2, h / 2) --２つ目の円の中心位置 set endRadius to 150 --２つ目の円の大きさ set aColor2 to myApp's class "NSColor"'s redColor() --２つ目の円の色(赤色) set theGradient to myApp's class "NSGradient"'s alloc()'s initWithStartingColor:aColor1 endingColor:aColor2 set aOptions to 0 --円の外のはみ出し設定（はみ出し無し） theGradient's drawFromCenter:startPoint radius:startRadius toCenter:endPoint radius:endRadius options:aOptions --円状のグラデーションを描画 anImage's unlockFocus()

 

 

オプション：

　aOptionsに NSGradientDrawsBeforeStartingLocation を設定すると一つ目の円の内側に一つ目の色が入り、

　　NSGradientDrawsAfterEndingLocationを設定すると２つ目の円の外側に２つ目の色が入ります。

set aOptions to ((myApp's NSGradientDrawsBeforeStartingLocation) as integer) ¬  + ((myApp's NSGradientDrawsAfterEndingLocation) as integer)

 

 

グラデーション（３）部分部分でグラデーションの色を変える

anImage's lockFocus() set colorArray to {(myApp's class "NSColor"'s blueColor()), (myApp's class "NSColor"'s yellowColor()), (myApp's class "NSColor"'s redColor())} -- グラデーションで採用したい色のリスト化 set theGradient to myApp's class "NSGradient"'s alloc()'s initWithColors:colorArray set theBezierPath to myApp's class "NSBezierPath"'s bezierPath() set theRect to myApp's NSMakeRect(x, y, w, h) theBezierPath's appendBezierPathWithRect:theRect set aAngle to 0 theGradient's drawInBezierPath:theBezierPath angle:aAngle -- カラーリストを元にグラデーションの描画 anImage's unlockFocus()

 

 

 

グラデーション（４）自由な図形の中にグラデーションを描く

anImage's lockFocus() -- |雨だれの図形を作成| set theBezierPath to myApp's class "NSBezierPath"'s bezierPath() tell theBezierPath -- 始まりの点 set aPoint to myApp's NSMakePoint(250, 300) moveToPoint_(aPoint) -- 直線 set aPoint to myApp's NSMakePoint(350, 150) lineToPoint_(aPoint) -- 曲線 set aPoint to myApp's NSMakePoint(150, 150) set aControlPoint1 to myApp's NSMakePoint(350, 5) set aControlPoint2 to myApp's NSMakePoint(150, 5) curveToPoint_controlPoint1_controlPoint2_(aPoint, aControlPoint1, aControlPoint2) -- 最初と最後の点を繋いで図形の線を閉じる closePath() end tell -- |グラデーションで塗りつぶす| set aColor1 to myApp's class "NSColor"'s whiteColor() set aColor2 to myApp's class "NSColor"'s cyanColor() set aAngle to 90 set theGradient to myApp's class "NSGradient"'s alloc()'s initWithStartingColor:aColor1 endingColor:aColor2 theGradient's drawInBezierPath:theBezierPath angle:aAngle --　|枠の罫線を描く| set strokeColor to myApp's class "NSColor"'s blueColor() strokeColor's |set|() theBezierPath's setLineWidth:2 theBezierPath's stroke() anImage's unlockFocus()