質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
UWP

UWPは、Universal Windows Platformの略。様々なデバイス向けに提供されているアプリケーションを共通のフレームワーク上で動作可能にする仕組みで、Windows10で導入されました。

Q&A

2回答

8794閲覧

UWPで2枚のImageを重ねて表示したいです

cancat

総合スコア313

UWP

UWPは、Universal Windows Platformの略。様々なデバイス向けに提供されているアプリケーションを共通のフレームワーク上で動作可能にする仕組みで、Windows10で導入されました。

0グッド

0クリップ

投稿2017/07/09 11:50

編集2022/01/12 10:55

こんにちは。
Windows10でUWPのアプリケーションを開発しています。
Visual Studio 2017 Communityを使っています。

###前提・実現したいこと
Imageを2枚重ねて、奥に地のイメージ、
手前のImageにPNG(ほぼモノクロ)の背景部分(地の部分)を透明にして、表示したいです。
単純に重ねると、奥の画像は見えないのです。
どのようなことをすればよいでしょう。
image background="transparent"みたいな指定はありませんか?

###該当のソースコード

xaml

1 <Grid > 2 3 <Image x:Name="Background" 4 Source="ms-appx:///Assets/background.png" > 5 </Image> 6 <Image x:Name="mainphoto" /> 7</Grid>

###補足情報(言語/FW/ツール等のバージョンなど)
Microsoft Visual Studio Community 2017
Version 15.0.26228.9 D15RTWSVC
Microsoft .NET Framework
Version 4.6.01586

です。
よろしくお願いします。

Opacity="0.5"だと手前のイメージ全体が薄くなってしまいます。
手前のイメージの背景部分のみをうすくできればと思っています。

C#

1using Windows.Graphics.Imaging; 2using Windows.UI; 3using Windows.UI.Xaml.Media.Imaging; 4 5namespace TESTImage 6{ 7 class TransparentImage 8 { 9 private BitmapSource GetPngWithTransparentBackground(BitmapSource source, Color transparentColor) 10 { 11 BitmapFrame frame = BitmapFrame.Create(source); 12 var writeableBitmap = new WriteableBitmap(frame); 13 14 if (writeableBitmap.Format.BitsPerPixel != 32) 15 { 16 return null; 17 } 18 19 var rect = new Int32Rect(0, 0, writeableBitmap.PixelWidth, writeableBitmap.PixelHeight); 20 var bytesPerPixel = (writeableBitmap.Format.BitsPerPixel + 7) / 8; // 1 ピクセル当たりのバイト数(4 になるはず) 21 var stride = writeableBitmap.PixelWidth * bytesPerPixel; // 幅方向のバイト数 22 var arraySize = stride * writeableBitmap.PixelHeight; 23 24 var sourcePixels = new byte[arraySize]; 25 var newPixels = new byte[arraySize]; 26 27 writeableBitmap.CopyPixels(sourcePixels, stride, 0); 28 writeableBitmap.CopyPixels(newPixels, stride, 0); 29 30 byte a, r, g, b; 31 int index; // 左上隅からのバイトのインデックス 32 33 for (int y = 0; y < writeableBitmap.PixelHeight; y++) 34 { 35 for (int x = 0; x < writeableBitmap.PixelWidth; x++) 36 { 37 index = x * bytesPerPixel + y * stride; 38 b = sourcePixels[index]; 39 g = sourcePixels[index + 1]; 40 r = sourcePixels[index + 2]; 41 a = sourcePixels[index + 3]; 42 43 Color color = Color.FromArgb(a, r, g, b); 44 45 if (color.Equals(transparentColor)) 46 { 47 newPixels[index + 3] = 0; // アルファ値を持つバイトを 0 に設定する 48 } 49 } 50 } 51 52 writeableBitmap.WritePixels(rect, newPixels, stride, 0); 53 54 return writeableBitmap; 55 } 56 57 //上記のメソッドを利用するコードは以下のとおりです。imageはPNG画像。Colors.White のピクセルを透明化する。 58 private WriteableBitmap imagetransparent(WriteableBitmap image) 59 { 60 return this.GetPngWithTransparentBackground(image, Colors.White); 61 } 62 } 63}

では動作しませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

test.png
test2.png
イメージ説明

<Window x:Class="transparent.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:transparent" mc:Ignorable="d" Title="MainWindow" SizeToContent="WidthAndHeight"> <Grid> <Image x:Name="画像1"/> </Grid> </Window>

C#

1using System.Windows; 2using System.Windows.Media.Imaging; 3using System.Drawing; 4using System.Drawing.Imaging; 5using System.IO; 6 7namespace transparent 8{ 9 /// <summary> 10 /// MainWindow.xaml の相互作用ロジック 11 /// </summary> 12 public partial class MainWindow : Window 13 { 14 public MainWindow() 15 { 16 InitializeComponent(); 17 Create_Bitmap(); 18 } 19 20 private void Create_Bitmap() 21 { 22 Bitmap bmp = new Bitmap("test.png"); 23 bmp.MakeTransparent(System.Drawing.Color.White); 24 25 Bitmap bgbmp = new Bitmap("test2.png"); 26 Graphics gs = Graphics.FromImage(bgbmp); 27 gs.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height); 28 gs.Dispose(); 29 bmp.Dispose(); 30 31 using(Stream st = new MemoryStream()) 32 { 33 bgbmp.Save(st, ImageFormat.Bmp); 34 st.Seek(0, SeekOrigin.Begin); 35 画像1.Source = BitmapFrame.Create(st, BitmapCreateOptions.None, BitmapCacheOption.OnLoad); 36 } 37 } 38 } 39}

参考
System.Drawing.BitmapをWPF用に変換
指定した色を透明色として画像を表示する

WPFですが、考えてみました。
2枚の画像を用意して1枚の特定色を透過、合体させて
表示しています。

投稿2017/07/12 22:12

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こんにちは。

モノクロ画像は透過PNGで、背景部分は透過指定されているのでしょうか。

それともそうはなっておらず、
部分的に透過率を変更したいといことでしょうか。

UWPの標準機能内でやれると良いですが、やれない場合は
少なくとも、手前の画像を背景PNGと透過PNGに分割して奥のImageと重ねて、背景PNGのOpacityのみ変更すれば手前のモノクロ部分の透過率は変更されずに済む気がします。


もし質問内容の解釈が誤っている場合は、対象の画像を添付して頂けると齟齬が無くなると思いますのでご検討ください。

投稿2017/07/10 00:12

編集2017/07/10 00:14
Tak1wa

総合スコア4791

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cancat

2017/07/10 06:14

モノクロ画像は単なるBitmapで、透過PNGではないです。 なので苦しんでいます。
cancat

2017/07/10 06:15

画像をTeratailにはれたことがないのです。もう一度準備してみます。
Tak1wa

2017/07/10 06:20

> PNG(ほぼモノクロ)の背景部分(地の部分)を透明にして、表示したいです とおっしゃってますがBitmapなのですか?PNGで透過設定してもらうのが一番良いと思いますが…
cancat

2017/07/10 11:47

セルアニメみたいな感じです。 手前に、ごく普通の画像ファイルを読み、その地の部分に、奥の背景を表示したいのです。 手前のセルに相当する画像は、いろいろあるのです。 読み込むファイルはいろいろあります。jpg/png/bmp。 なので、pngファイルであることはないですし、透過指定してあるpngであることはまったく想定外です。 ごくたまたま透過pngであることがないとはいいませんが、それは現在のところ、ざっくり1/5,000以下の確率です。つまり、ほぼ期待できないということです。 メモ画像を作ったのですが、やっぱり貼れませんでした…。 Teratailむずかしい…。
Tak1wa

2017/07/10 13:19

うーん、手前のセル画像に透過処理がされていない場合は奥の背景を表示するのは難しいかもしれません…。 もしくはその形に手前の画像の形を切り抜く方法もあるかもしれませんが、おそらくもっと難しいです…。
cancat

2017/07/10 13:25

そうですか~。 手前の画像はモノクロ(グラデーションはあるが)と仮定すれば、 for(y座標) for(x座標) if(200 < R && 200 < G && 200 < B) A=0; とかでできるはできるはずなのです。 それが書いているコードなのですけど…。 動かないんですよね…。 反応なしになってしまう。 ひょっとして、2000×2000ピクセルとかを処理していて、遅いだけかもしれないのですが…。まあ遅くて動かないのなら、現実的には使えなくて。 悩んでます。 使うのは自分だけなので、切り抜きはそれほど厳密でなくてもいいか~と思ってます。
cancat

2017/07/10 13:46

そうそう、そんな感じです。透過色を幅をもたせて決めて、白っぽいところを透過にする、みたいなイメージです。 今日はもうダウンなので、また明日試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問