From window, to wind

趣味のゲームとJavaプログラムなどについて 適当に書き綴るブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブラカル風ボタンのスタイル

最近遊んでいるブラウザカルネージハートのボタンっぽいスタイルを作ってみました。

ブラカルボタン
左上が通常、右上がマウスオーバー、左下がクリックできない状態

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type TextBlock}" x:Key="ContentStyle">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="White"/>
</Style>
<!-- Button -->
<Style x:Key="styleButton" TargetType="Button">
<Setter Property="MinHeight"
Value="30" />
<Setter Property="MinWidth"
Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Polygon x:Name="Polygon1" Stroke="Black" StrokeThickness="2" Points="1,1 89,1 99,11 99,29 11,29 1,19" Fill="{DynamicResource PDefaultBrush}"/>
<Polygon x:Name="Polygon2" Stroke="{DynamicResource RDefault}" StrokeThickness="1" Points="2,2 88,2 98,12 98,28 12,28 2,18"/>
<Line x:Name="Line1" Stroke="{DynamicResource LDefault}" StrokeThickness="1.5" X1="15" Y1="25.5" X2="95" Y2="25.5" />
<Ellipse x:Name="Ellipse1" Fill="{DynamicResource EDefaultBrush}" />
<ContentPresenter x:Name="ContentStyle" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource ContentStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Polygon1" Property="Fill" Value="{DynamicResource POverBrush}"/>
<Setter TargetName="Polygon2" Property="Stroke" Value="{DynamicResource ROver}"/>
<Setter TargetName="Line1" Property="Stroke" Value="{DynamicResource LOver}"/>
<Setter TargetName="Ellipse1" Property="Fill" Value="{DynamicResource EOverBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Polygon1" Property="Fill" Value="{DynamicResource PfalseBrush}"/>
<Setter TargetName="Polygon2" Property="Stroke" Value="{DynamicResource Rfalse}"/>
<Setter TargetName="Line1" Property="Stroke" Value="{DynamicResource Lfalse}"/>
<Setter TargetName="Ellipse1" Property="Fill" Value="{DynamicResource EfalseBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- Brush -->
<LinearGradientBrush x:Key="PDefaultBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF797979"/>
<GradientStop Offset="0.5" Color="#FF433E44"/>
<GradientStop Offset="0.5" Color="#FF0D0C0D"/>
<GradientStop Offset="1" Color="#FF2B790C"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="RDefault">#FF56B561</SolidColorBrush>
<SolidColorBrush x:Key="LDefault">#FF03FF02</SolidColorBrush>
<RadialGradientBrush x:Key="EDefaultBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#9903FF02"/>
<GradientStop Offset="0.4" Color="#6603FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>

<LinearGradientBrush x:Key="POverBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF8BB07D"/>
<GradientStop Offset="0.5" Color="#FF57774A"/>
<GradientStop Offset="0.5" Color="#FF214513"/>
<GradientStop Offset="1" Color="#FF3FB912"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ROver">#FF69E867</SolidColorBrush>
<SolidColorBrush x:Key="LOver">#FFBAFFAC</SolidColorBrush>
<RadialGradientBrush x:Key="EOverBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#9903FF02"/>
<GradientStop Offset="0.4" Color="#6603FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>

<LinearGradientBrush x:Key="PfalseBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF6F6F6F"/>
<GradientStop Offset="0.5" Color="#FF4A4A4A"/>
<GradientStop Offset="0.5" Color="#FF181818"/>
<GradientStop Offset="1" Color="#FF484848"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Rfalse">#FF8A8A8A</SolidColorBrush>
<SolidColorBrush x:Key="Lfalse">#00BAFFAC</SolidColorBrush>
<RadialGradientBrush x:Key="EfalseBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#0003FF02"/>
<GradientStop Offset="0.4" Color="#0003FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>
</ResourceDictionary>


外形が四角ではないためPolygonを使ったけど、おかげでサイズが固定になってしまった。
文字の表示はContentPresenterを利用。フォントの指定にはContentPresenter.Resourcesを利用しないとエラーが出るので注意。
スポンサーサイト

処理時間の謎

WPFのRectangleを大量に使ってStrokeでグリッド線を描いているのですが、
グリッド線の表示の有無の変更した際にかかる時間がかなり遅くて困っています。

下のコードでコメントアウトしている部分だけだと描画までにものすごく時間が掛ります(数十秒)。
一方でRectangleが入っている子要素を一度取り除いてから再度子要素を追加する処理を加えると
何故か描画時間が短くなります(それでも数秒掛りますが)。

理由が分かる方がいたら教えてください。

        //グリッド線の有無
private void gridCheck_Click(object sender, RoutedEventArgs e) {
//bitmap[resolutionIndex].setGridLine((bool)gridCheck.IsChecked);
if (interViewGrid != null) {
interViewGrid.Children.Clear();
interViewGrid.Children.Add(bitmap[resolutionIndex]);
bitmap[resolutionIndex].setGridLine((bool)gridCheck.IsChecked);
}
}

モザイクプレイヤー作ってみた

東芝のMindTuneとWPFを使ってモザイクプレイヤーを作ってみました。
脳波センサから集中力を計測して、集中力が低いとモザイク状に動画が表示されます。
脳波センサのデータ取得は前に書いたブログの記事中のリンクを参考にしてください。



動画の中でちょっとだけ触れていますが、モザイク状に描画する処理がこちらになります。
        private void drawMosaicImage() {
getbmp = new RenderTargetBitmap((int)mediaElement1.ActualWidth, (int)mediaElement1.ActualHeight, 96, 96, PixelFormats.Pbgra32);
getbmp.Render(mediaElement1);

viewbmp = new WriteableBitmap(getbmp);


int channel = 4;
int width = getbmp.PixelWidth;
int height = getbmp.PixelHeight;
int stride = width * ((getbmp.Format.BitsPerPixel + 7) / 8);
byte[] pxdata = new byte[width * height * channel];
byte[] outdata = new byte[width * height * channel];
getbmp.CopyPixels(pxdata, stride, 0);

for (int i = 0; i < width; i++) {
for (int j = 0; j < height; j++) {
int x = (i / square) * square;
int y = (j / square) * square;
double Y;
switch (viewcase) {
case 1://反転
outdata[(i + j * width) * channel + 0] = (byte)(255 - pxdata[(x + y * width) * channel + 0]);
outdata[(i + j * width) * channel + 1] = (byte)(255 - pxdata[(x + y * width) * channel + 1]);
outdata[(i + j * width) * channel + 2] = (byte)(255 - pxdata[(x + y * width) * channel + 2]);
outdata[(i + j * width) * channel + 3] = pxdata[(x + y * width) * channel + 3];
break;
case 2://白黒
Y = (byte)(0.299 * pxdata[(x + y * width) * channel + 2] + 0.587 * pxdata[(x + y * width) * channel + 1] + 0.114 * pxdata[(x + y * width) * channel + 0]);
outdata[(i + j * width) * channel + 0] = (byte)Y;
outdata[(i + j * width) * channel + 1] = (byte)Y;
outdata[(i + j * width) * channel + 2] = (byte)Y;
outdata[(i + j * width) * channel + 3] = pxdata[(x + y * width) * channel + 3];
break;
case 3://セピア
Y = (0.299 * pxdata[(x + y * width) * channel + 2] + 0.587 * pxdata[(x + y * width) * channel + 1] + 0.114 * pxdata[(x + y * width) * channel + 0]);
double blue = (Y - 40.372);//b
if (blue > 255) blue = 255; else if (blue < 0) blue = 0;
double green = (Y - 2.17549);//g
if (green > 255) green = 255; else if (green < 0) green = 0;
double red = (Y + 20.10767);//r
if (red > 255) red = 255; else if (red < 0) red = 0;
outdata[(i + j * width) * channel + 0] = (byte)blue;//b
outdata[(i + j * width) * channel + 1] = (byte)green;//g
outdata[(i + j * width) * channel + 2] = (byte)red;//r
//outdata[(i + j * width) * channel + 0] = (byte)(Y*0.4);//b
//outdata[(i + j * width) * channel + 1] = (byte)(Y*0.7);//g
//outdata[(i + j * width) * channel + 2] = (byte)(Y);//r
outdata[(i + j * width) * channel + 3] = pxdata[(x + y * width) * channel + 3];
break;
default://非処理
outdata[(i + j * width) * channel + 0] = pxdata[(x + y * width) * channel + 0];
outdata[(i + j * width) * channel + 1] = pxdata[(x + y * width) * channel + 1];
outdata[(i + j * width) * channel + 2] = pxdata[(x + y * width) * channel + 2];
outdata[(i + j * width) * channel + 3] = pxdata[(x + y * width) * channel + 3];
break;
}

}


}

viewbmp.WritePixels(new Int32Rect(0, 0, width, height), outdata, stride, 0);

image1.Source = viewbmp;
}

HTML5のCanvasで画像表示(嘘)

えーと、タイトルにある通り嘘ですw

HTML5のCanvasを使っているのですが、
画像をJavaScriptで1ピクセルずつ四角形で塗りつぶしています。
(普通は画像ファイルを読み込んで描画)

ですのでファイルサイズがとっても大きいです(スクリプトのコード中に画像データが埋め込まれていると考えてください)。開く際はご注意を・・・
http://kagenyan.web.fc2.com/canvastest/canvastest.htm

このファイルを作る際に利用したツールのソースコードを置いておきます。
もともとはHTMLのテーブルタグで画像を表示するために作ったツールを流用した物なので、
テーブルタグ生成のコードも含まれているので、テーブルタグで描画したい人は
そちらをご利用してください(たぶんいない)。

ファイルサイズ的には Canvas > テーブルタグ ですねw

なお、このツールではプログレスバーは計算時間だけなので、
計算終了後コードをテキストボックスに表示するのに時間がかかるのでご注意ください。

まあ誰得って奴ですねw

【追記】
ファイルサイズが大きいのと処理が遅い原因として
ピクセルの書きだしのコードが一つ一つ埋め込まれていることにあります。

そこで画像のRGBデータを配列として、
for文で回すことにしました。
ファイルサイズもだいぶ小さくなり計算処理も早くなりました。
修正したメソッドも置いておきます。

まあ普通に気付けよってところですねw

ファミコンカラーで描画する処理[C#・WPF]

WPFのWriteableBitmapをファミコンカラー54色で描画する処理を作りました。
ファミコンカラーは下記のブログの色見本の画像からRGBデータを調べました。
NESカラー色見本ファイル(ファミコンカラー色見本ファイル

処理自体は単純で54色すべてについてRGBデータの距離を計算し、
一番近い色に置き換える処理となっています。
一部色斑が出るみたいなので前後左右の色と比較するような処理を組み込むべきかもしれませんね。
NESColor.jpg

他の言語の方でも似たような処理で出来ると思いますので、
RGBデータを含めてソースコードを置いておきます。
続きからご確認ください。
次のページ

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。