Help us understand the problem. What is going on with this article?

NSImage に Tint Color を適用する機能を拡張する

More than 3 years have passed since last update.

OS X の Assets にもレンダリングモードがあり、iOS のように画像そのものの色を使うか Tint Color をマスクするかを指定できますが、仮に Template としたところで Tint Color を指定する方法が見つかりませんでした。Cocoa Touch には UIImageRenderingMode がありますが Cocoa の NSImage には template というプロパティがあるのみなのでこの辺りが異なるようです。

  • 基本的に自由に設定できる Tint Color の仕組みがない
  • UIImageRenderingMode に相当する enum ではなく、template プロパティで判定する
  • Template 描画される色はセルによって決められる模様


Assets では Template Image にできる

セルが決めた色ではなく iOS の Tint Color 的に好きな色で描画したいので、そのように NSImage を拡張してみます。

NSImage
import Cocoa

extension NSImage {
    func imageWithTintColor(tintColor: NSColor) -> NSImage {
        if self.template == false {
            return self
        }

        let image = self.copy() as! NSImage
        image.lockFocus()

        tintColor.set()
        NSRectFillUsingOperation(NSMakeRect(0, 0, image.size.width, image.size.height), NSCompositingOperation.CompositeSourceAtop)

        image.unlockFocus()
        image.template = false

        return image
    }
}
Sample
let tintColor = NSColor(red: 1.0, green: 0.08, blue: 0.50, alpha: 1.0)
let image = NSImage(named: "NAME").imageWithTintColor(tintColor)
imageView.image = image

元々青い色のアイコンに Tint Color を適用した結果がこれになります。

https://gist.github.com/usagimaru/c0a03ef86b5829fb9976b650ec2f1bf4

usagimaru
ソフトウェアデザイン
https://interactionmania.com
goodpatch
Goodpatch(株式会社グッドパッチ)は東京、ベルリン、台北にあるWeb / iOS / AndroidなどマルチデバイスアプリケーションのUIデザイン会社です。サービスやプロダクトの企画設計から関わりコンセプトメイキング、UX設計、プロトタイピング、UIデザイン、実装までワンストップで提供しています。
https://goodpatch.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした