2021/3/11 : Flutter : ImageクラスのBlendModeまとめ

https://api.flutter.dev/flutter/rendering/RenderImage/colorBlendMode.html

colorBlendModeプロパティ

BlendMode? colorBlendMode

Image(画像)と色の組み合わせ方を指定するプロパティ。

デフォルト値はBlendMode.srcIn。ブレンドモードに関しては

色がsource

画像がdestination

です。

colorBlendModeプロパティの型はBlendMode型。列挙型ですね。

列挙型の値を指定することで画像(image)と色の組み合わせ方を指定する、と。

色がsource

画像がdestination

何のこっちゃ、という感じですが、↓のページに詳しく説明されているのでその説明で使用される用語みたいです。


https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html

BlendMode列挙型




 

import 'package:flutter/material.dart';
void main(){
  return runApp(MaterialApp(home:MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child:Image.asset(
          'assets/images/diamond.png',
          color:Colors.red,
          colorBlendMode:BlendMode.colorBurn,//←ここを変えてみる。
        ),
      ),
    );
  }
}

 


colorBlendMode:BlendMode.clear,

Drop the destination image, only paint the source image.

source(色)とdestination(画像)の両方をドロップし、何も残しません。


colorBlendMode:BlendMode.src,

Drop the destination image, only paint the source image.

destination(画像)をドロップし、source(色)のみをペイントします。


colorBlendMode:BlendMode.dst,

Drop the source image, only paint the destination image.

source(色)をドロップし、destination(画像)のみをペイントします。


colorBlendMode:BlendMode.srcOver,

Composite the source image over the destination image.

source(色)をdestination(画像)の上に合成します。


colorBlendMode:BlendMode.dstOver,

Composite the source image under the destination image.

source(色)をdestination(画像)の下に合成します。


colorBlendMode:BlendMode.srcIn,

Show the source image, but only where the two images overlap. The destination image is not rendered, it is treated merely as a mask.

source(色)を表示しますが、2つの画像が重なっている場所のみを表示します。 destination(画像)はレンダリングされず、単にマスクとして扱われます。


colorBlendMode:BlendMode.dstIn,

Show the destination image, but only where the two images overlap. The source image is not rendered, it is treated merely as a mask.

destination(画像)を表示しますが、2つの画像が重なっている場所のみを表示します。 source(色)はレンダリングされず、単にマスクとして扱われます。


colorBlendMode:BlendMode.srcOut,

Show the source image, but only where the two images do not overlap. The destination image is not rendered, it is treated merely as a mask.

source(色)を表示しますが、2つの画像が重ならない場合に限ります。 destination(画像)はレンダリングされず、単にマスクとして扱われます。


colorBlendMode:BlendMode.dstOut,

Show the destination image, but only where the two images do not overlap. The source image is not rendered, it is treated merely as a mask.

destination(画像)を表示しますが、2つの画像が重ならない場合に限ります(結局destinationは表示されない)。 source(色)はレンダリングされず、単にマスクとして扱われます。


colorBlendMode:BlendMode.srcATop,

Composite the source image over the destination image, but only where it overlaps the destination.

source(色)をdestination(画像)の上に合成しますが、デスティネーションと重なる場合のみです。


colorBlendMode:BlendMode.dstATop,

Composite the destination image over the source image, but only where it overlaps the source.

source(色)の上にdestination(画像)を合成しますが、ソースと重なる場合のみです。


colorBlendMode:BlendMode.xor,

Apply a bitwise `xor` operator to the source and destination images. This leaves transparency where they would overlap.

source(色)とdestination(画像)にビット単位の `xor`演算子を適用します。 これにより、重なり合う場所が透明になります。


colorBlendMode:BlendMode.plus,

Sum the components of the source and destination images.

source(色)とdestination(画像)のコンポーネントを合計します。


colorBlendMode:BlendMode.modulate,

Multiply the color components of the source and destination images.

source(色)とdestination(画像)の色成分を乗算します。


colorBlendMode:BlendMode.screen,

Multiply the inverse of the components of the source and destination images, and inverse the result.

source(色)とdestination(画像)のコンポーネントの逆数を乗算し、結果を逆にします。


colorBlendMode:BlendMode.overlay,

Multiply the components of the source and destination images after adjusting them to favor the destination.

source(色)を優先するように調整した後、source(色)とdestination(画像)のコンポーネントを乗算します。


colorBlendMode:BlendMode.darken,

Composite the source and destination image by choosing the lowest value from each color channel.

各カラーチャネルから最小値を選択して、source(色)とdestination(画像)を合成します。


colorBlendMode:BlendMode.lighten,

Composite the source and destination image by choosing the highest value from each color channel.

各カラーチャネルから最大値を選択して、source(色)とdestination(画像)を合成します。


colorBlendMode:BlendMode.colorDodge,

Divide the destination by the inverse of the source.

宛先をソースの逆数で除算します。


colorBlendMode:BlendMode.colorBurn,

Divide the inverse of the destination by the source, and inverse the result.

宛先の逆数をソースで除算し、結果を逆にします。


colorBlendMode:BlendMode.hardLight,

Multiply the components of the source and destination images after adjusting them to favor the source.

ソースとデスティネーションの画像のコンポーネントを、ソースを優先するように調整した後、乗算します。


BlendMode.softLight,

Use [colorDodge] for source values below 0.5 and [colorBurn] for source values above 0.5.
This results in a similar but softer effect than [overlay]

0.5未満のソース値には[colorDodge]を使用し、0.5を超えるソース値には[colorBurn]を使用します。
これにより、[オーバーレイ]と同様ですが、よりソフトな効果が得られます。


BlendMode.difference,

Subtract the smaller value from the bigger value for each channel.

各チャネルの大きい値から小さい値を引きます。


BlendMode.exclusion,

Subtract double the product of the two images from the sum of the two images.

2つの画像の合計から2つの画像の積の2倍を引きます。


BlendMode.multiply,

Multiply the components of the source and destination images, including the alpha channel.

アルファチャネルを含む、ソース画像と宛先画像のコンポーネントを乗算します。


BlendMode.hue,

Take the hue of the source image, and the saturation and luminosity of the destination image.

ソース画像の色相、およびデスティネーション画像の彩度と明度を取得します。


BlendMode.saturation,

Take the saturation of the source image, and the hue and luminosity of the destination image.

ソース(色)の彩度、およびデスティネーション(画像)の色相と明度を取得します。


BlendMode.color,


BlendMode.luminosity,

 

 

コメントを残す

メールアドレスが公開されることはありません。