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

【phina.js】phina.util.Color クラス

More than 1 year has passed since last update.

この記事はphina.js v0.2.2について書いています。
こちらからphina.util.Colorクラスのプロパティ、メソッドの一覧を見られます。

phina.util.Colorクラス

phina.util.Colorクラスは色を扱うクラスです。hslやrgbなどの色を中心に扱うことができます。

Example

phina.util.Colorクラスはstaticなクラスとして使ったり、インスタンス化して使うことができます。インスタンス経由では主にCSS関係の値の出力、staticな状態では形式の変換や値の出力などの機能が使用できます。

phina.main(function() {
  //インスタンス経由で使う
  var color = phina.util.Color(128, 72, 206, 1);
  console.log(color.toStyleAsHex()); // => #8048ce
  //staticなクラスとして使う
  console.log(phina.util.Color.HSLtoRGB(208, 100, 50)); // => [0, 136, 255]
});

また、phina.globalize()を実行後なら、phina.util.の部分を省略することができます。

phina.globalize();
phina.main(function() {
  //インスタンス経由で使う
  var color = Color(128, 72, 206, 1);
  console.log(color.toStyleAsHex()); // => #8048ce
  //staticなクラスとして使う
  console.log(Color.HSLtoRGB(208, 100, 50)); // => [0, 136, 255]
});

phina.util.Color(r, g, b, a) (コンストラクター)

phina.util.Colorクラスのコンストラクターです。引数はset()(後述)と同じです。コンストラクターの引数でaは省略可能ですが、r, g, bを指定しないとr, g, bnullになってしまいますので、注意しましょう。

  • constructor
  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1)

インスタンス変数

r

赤です。0~255の範囲で指定します。

  • default: 255

g

緑です。0~255の範囲で指定します。

  • default: 255

b

青です。0~255の範囲で指定します。

  • default: 255

a

不透明度です。0~1の範囲で指定します。

  • default: 1.0

インスタンスメソッド

set(r, g, b, a)

r, g, b, a を指定します。setFromNumberと全く同じです。好きな方を使いましょう。aは省略可能です。(ただし省略するとaは自動的に1になります)

  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1 省略可能)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.set(128, 72, 206, 1).toStyle()); // => rgba(128,72,206,1)
});

setFromNumber(r, g, b, a)

数値でr, g, b, aを指定します。setと全く同じです。好きな方を使いましょう。aは省略可能です。(ただし省略するとaは自動的に1になります)

  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1 省略可能)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setFromNumber(128, 72, 206, 1).toStyle()); // => rgba(128,72,206,1)
});

setFromArray(arr)

配列でr, g, b, aを指定します。aは省略可能です。(ただし省略するとaは自動的に1になります)r, g, bは0~255、aは0~1の範囲で指定します。

  • Param:
    • arr: Array[Number(r), Number(g), Number(b), Number(a)] aは省略可能)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setFromArray([128, 72, 206, 1]).toStyle()); // => rgba(128,72,206,1)
});

setFromObject(obj)

オブジェクトでr, g, b, aを指定します。aは省略可能です。(ただし省略するとaは自動的に1になります)r, g, bは0~255、aは0~1の範囲で指定します。

  • Param:
    • arr: Object{r: Number, g: Number, b: Number, a: Number}
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setFromObject({
    r: 128,
    g: 72,
    b: 206,
    a: 1
  }).toStyle()); // => rgba(128,72,206,1)
});

setFromString(str)

文字列でr, g, b, aを指定します。hex111, hex222, rgba, rgb, hsla, hsl, WEBカラーが使えます。ただし、hslaに関してはv0.2.1の時点でバグでうまく動作しません。次のバージョンに期待しましょう。

  • Param:
    • arr: String (hex111, hex222, rgba, rgb, hsla, hsl, WEBカラー)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setFromString('#34a').toStyle()); // => rgba(51,68,170,1)
  console.log(color.setFromString('#fefefe').toStyle()); // => rgba(254,254,254,1)
  console.log(color.setFromString('rgba(101,43,206,1)').toStyle()); // => rgba(101,43,206,1)
  console.log(color.setFromString('rgb(128,72,206)').toStyle()); // => rgba(128,72,206,1)
  console.log(color.setFromString('hsl(235,70%,35%)').toStyle()); // => rgba(26,37,151,1)
  console.log(color.setFromString('aqua').toStyle()); // => rgba(0,255,255,1)
});

setSmart(r, g, b, a)

setSmartは賢いセッターです。引数を自動で判別してsetSmart(r, g, b, a), setSmart(arr), setSmart(obj), setSmart(str)と使い分けます。この節ではsetSmart(str)について解説します。

機能はset(),setFromNumber()と同じです。
数値でr, g, b, aを指定します。aは省略可能です。(ただし省略するとaは自動的に1になります)

  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1 省略可能)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

v0.2.1時点でsetSmart(r, g, b, a)はバグでうまく動作しません。次のバージョンに期待しましょう。

setSmart(arr)

setSmartは賢いセッターです。引数を自動で判別してsetSmart(r, g, b, a), setSmart(arr), setSmart(obj), setSmart(str)と使い分けます。この節ではsetSmart(str)について解説します。

機能はsetFromArray()と同じです。
配列でr, g, b, aを指定します。aは省略可能です。(ただし省略するとaは自動的に1になります)r, g, bは0~255、aは0~1の範囲で指定します。

  • Param:
    • arr: Array[Number(r), Number(g), Number(b), Number(a)] aは省略可能)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setSmart([128, 72, 206, 1]).toStyle()); // => rgba(128,72,206,1)
});

setSmart(obj)

setSmartは賢いセッターです。引数を自動で判別してsetSmart(r, g, b, a), setSmart(arr), setSmart(obj), setSmart(str)と使い分けます。この節ではsetSmart(obj)について解説します。

機能はsetFromObjectと同じです。
オブジェクトでr, g, b, aを指定します。aは省略可能です。(ただし省略するとaは自動的に1になります)r, g, bは0~255、aは0~1の範囲で指定します。

  • Param:
    • arr: Object{r: Number, g: Number, b: Number, a: Number}
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setSmart({
    r: 128,
    g: 72,
    b: 206,
    a: 1
  }).toStyle()); // => rgba(128,72,206,1)
});

setSmart(str)

setSmartは賢いセッターです。引数を自動で判別してsetSmart(r, g, b, a), setSmart(arr), setSmart(obj), setSmart(str)と使い分けます。この節ではsetSmart(str)について解説します。

機能はsetFromStringと同じです。
文字列でr, g, b, aを指定します。hex111, hex222, rgba, rgb, hsla, hsl, WEBカラーが使えます。ただし、hslaに関してはv0.2.1の時点でバグでうまく動作しません。次のバージョンに期待しましょう。

  • Param:
    • arr: String (hex111, hex222, rgba, rgb, hsla, hsl, WEBカラー)
  • Return: Object (自分自身)
  • chainable

自分自身を返すのはメソッドチェーンができるようにするためです。

Example

phina.main(function() {
  var color = phina.util.Color();
  console.log(color.setSmart('#34a').toStyle()); // => rgba(51,68,170,1)
  console.log(color.setSmart('#fefefe').toStyle()); // => rgba(254,254,254,1)
  console.log(color.setSmart('rgba(101,43,206,1)').toStyle()); // => rgba(101,43,206,1)
  console.log(color.setSmart('rgb(128,72,206)').toStyle()); // => rgba(128,72,206,1)
  console.log(color.setSmart('hsl(235,70%,35%)').toStyle()); // => rgba(26,37,151,1)
  console.log(color.setSmart('aqua').toStyle()); // => rgba(0,255,255,1)
});

toStyleAsHex()

CSS用16進数文字列(hex22)を返します。

  • Param: なし
  • Return: String (CSS用16進数文字列/hex222)

Example

phina.main(function() {
  var color = phina.util.Color(12, 207, 128, 1);
  console.log(color.toStyleAsHex()); // => #0ccf80
});

toStyleAsRGB()

CSS用RGB文字列を返します。

  • Param: なし
  • Return: String (CSS用RGB文字列)

Example

phina.main(function() {
  var color = phina.util.Color(12, 207, 128, 1);
  console.log(color.toStyleAsRGB()); // => rgba(12,207,128)
});

toStyleAsRGBA()

CSS用RGBA文字列を返します。toStyle()と全く同じです。好きな方を使いましょう。

  • Param: なし
  • Return: String (CSS用RGBA文字列)

Example

phina.main(function() {
  var color = phina.util.Color(12, 207, 128, 1);
  console.log(color.toStyleAsRGBA()); // => rgba(12,207,128,1)
});

toStyle()

CSS用RGBA文字列を返します。toStyleAsRGBA()と全く同じです。好きな方を使いましょう。

  • Param: なし
  • Return: String (CSS用RGBA文字列)

Example

phina.main(function() {
  var color = phina.util.Color(12, 207, 128, 1);
  console.log(color.toStyle()); // => rgba(12,207,128,1)
});

static変数

phina.util.COLOR_LIST

phina.util.Colorクラスで内部的に使用されるWEBカラーのリストです。

COLOR_LIST: {
  /** @property black */
  "black": [0x00, 0x00, 0x00],
  /** @property silver */
  "silver": [0xc0, 0xc0, 0xc0],
  /** @property gray */
  "gray": [0x80, 0x80, 0x80],
  /** @property white */
  "white": [0xff, 0xff, 0xff],
  /** @property maroon */
  "maroon": [0x80, 0x00, 0x00],
  /** @property red */
  "red": [0xff, 0x00, 0x00],
  /** @property purple */
  "purple": [0x80, 0x00, 0x80],
  /** @property fuchsia */
  "fuchsia": [0xff, 0x00, 0xff],
  /** @property green */
  "green": [0x00, 0x80, 0x00],
  /** @property lime */
  "lime": [0x00, 0xff, 0x00],
  /** @property olive */
  "olive": [0x80, 0x80, 0x00],
  /** @property yellow */
  "yellow": [0xff, 0xff, 0x00],
  /** @property navy */
  "navy": [0x00, 0x00, 0x80],
  /** @property blue */
  "blue": [0x00, 0x00, 0xff],
  /** @property teal */
  "teal": [0x00, 0x80, 0x80],
  /** @property aqua */
  "aqua": [0x00, 0xff, 0xff],
}

staticメソッド

phina.util.strToNum(str)

phina.util.stringToNumber(str)と同じです。好きな方を使いましょう。
文字列での色指定を数値(RGBA)に変換し、配列で返すメソッドです。不透明度の情報がない場合aは返される配列に含まれません。hex111, hex222, rgba, rgb, hsla, hsl, WEBカラーが使えます。ただし、hslaに関してはv0.2.1の時点でバグでうまく動作しません。次のバージョンに期待しましょう。

  • Param:
    • str: String
  • Return: Array ([r, g, b, a])
  • static

Example

phina.main(function() {
  console.log(phina.util.Color.strToNum('#34a')); // => [51, 68, 170]
  console.log(phina.util.Color.strToNum('#fefefe')); // => [254, 254, 254]
  console.log(phina.util.Color.strToNum('rgba(101,43,206,1)')); // => [101, 43, 206, 1]
  console.log(phina.util.Color.strToNum('rgb(128,72,206)')); // => [128, 72, 206]
  console.log(phina.util.Color.strToNum('hsl(235,70%,35%)')); // => [26, 37, 151]
  console.log(phina.util.Color.strToNum('aqua')); // => [0, 255, 255]
});

phina.util.stringToNumber(str)

phina.util.strToNum(str)と同じです。好きな方を使いましょう。
文字列での色指定を数値(RGBA)に変換し、配列で返すメソッドです。不透明度の情報がない場合aは返される配列に含まれません。hex111, hex222, rgba, rgb, hsla, hsl, WEBカラーが使えます。ただし、hslaに関してはv0.2.1の時点でバグでうまく動作しません。次のバージョンに期待しましょう。

  • Param:
    • str: String
  • Return: Array ([r, g, b, a])
  • static

Example

phina.main(function() {
  console.log(phina.util.Color.stringToNumber('#34a')); // => [51, 68, 170]
  console.log(phina.util.Color.stringToNumber('#fefefe')); // => [254, 254, 254]
  console.log(phina.util.Color.stringToNumber('rgba(101,43,206,1)')); // => [101, 43, 206, 1]
  console.log(phina.util.Color.stringToNumber('rgb(128,72,206)')); // => [128, 72, 206]
  console.log(phina.util.Color.stringToNumber('hsl(235,70%,35%)')); // => [26, 37, 151]
  console.log(phina.util.Color.stringToNumber('aqua')); // => [0, 255, 255]
});

phina.util.HSLtoRGB(h, s, l)

HSLでの色指定を数値(RGB)に変換し、配列で返すメソッドです。hは0~360、 s, lは0~100の範囲で指定します。

  • Param:
    • h: Number (色相 Hue 0~360)
    • s: Number (彩度 Saturation 0~100)
    • l: Number (輝度 Lightness 0~100)
  • Return: Array ([r, g, b])
  • static

Example

phina.main(function() {
  console.log(phina.util.Color.HSLtoRGB(235, 70, 35)); // => [26, 37, 151]
});

phina.util.HSLAtoRGBA(h, s, l, a)

HSLAでの色指定を数値(RGBA)に変換し、配列で返すメソッドです。hは0~360、 s, lは0~100、aは0~1の範囲で指定します。

  • Param:
    • h: Number (色相 Hue 0~360)
    • s: Number (彩度 Saturation 0~100)
    • l: Number (輝度 Lightness 0~100)
    • a: Number (不透明度 Alpha 0~1)
  • Return: Array ([r, g, b, a])
  • static
phina.main(function() {
  console.log(phina.util.Color.HSLAtoRGBA(235, 70, 35, 1)); // => [26, 37, 151, 1]
});

phina.util.createStyleRGB(r, g, b)

RGBでの色指定からCSS用RGB文字列を生成して返します。r, g, bは0~255の範囲で指定します。

  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1)
  • Return: String (CSS用RGB文字列)
  • static

v0.2.1時点でphina.util.createStyleRGB(r, g, b)はバグでうまく動作しません。次のバージョンに期待しましょう。

phina.util.createStyleRGBA(r, g, b, a)

RGBAでの色指定からCSS用RGBA文字列を生成して返します。r, g, bは0~255、aは0~1の範囲で指定します。

  • Param:
    • r: Number (赤 0~255)
    • g: Number (緑 0~255)
    • b: Number (青 0~255)
    • a: Number (不透明度 0~1)
  • Return: String (CSS用RGB文字列)
  • static

Example

phina.main(function() {
  console.log(phina.util.Color.createStyleRGBA(26, 37, 151, 1)); // => rgba(26,37,151,1)
});

phina.util.createStyleHSL(h, s, l)

HSLでの色指定からCSS用HSL文字列を生成して返します。hは0~360、 s, lは0~100の範囲で指定します。

  • Param
    • h: Number (色相 Hue 0~360)
    • s: Number (彩度 Saturation 0~100)
    • l: Number (輝度 Lightness 0~100)
  • Return: String (CSS用HSL文字列)
  • static

Exammple

phina.main(function() {
  console.log(phina.util.Color.createStyleHSL(26, 50, 100)); // => hsl(26,50%,100%)
});

phina.util.createStyleHSLA(h, s, l, a)

HSLAでの色指定からCSS用HSLA文字列を生成して返します。hは0~360、 s, lは0~100、aは0~1の範囲で指定します。

  • Param
    • h: Number (色相 Hue 0~360)
    • s: Number (彩度 Saturation 0~100)
    • l: Number (輝度 Lightness 0~100)
    • a: Number (不透明度 Alpha 0~1)
  • Return: String (CSS用HSLA文字列)
  • static

Exammple

phina.main(function() {
  console.log(phina.util.Color.createStyleHSLA(26, 50, 100, 1)); // => hsla(26,50%,100%,1)
});

プロパティ、メソッド一覧

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
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