I need to mask dynamically created images, so that they will be shown as circles.
Pictures can be square, but are usually rectangles... so the circle that will be shown can be taken from the center of it...so the shown circle must be inscribed in the picture and centered in the center of it.
This is the code I'm using right now:
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
image.OpacityMask = opacityMask;
//Showing the image
panel.Children.Add(image);
This all works fine, but when the pictures are rectangular and not square, this creates an ellipse instead of a circle... any idea on how can I force it to create a circle?
I also tried to specify some more parameters, but doesn't seem to help:
opacityMask.Center = new Point(0.5, 0.5);
opacityMask.RadiusX = 0.5;
opacityMask.RadiusY = 0.5;
Okay, today i tried again to fix this, and i came out with a solution.
It's not the best, more clean solution ever...but works :)
I basically wrapped the picture (not masked) into a StackPanel and then applied the mask to the StackPanel instead ;)
This is how it looks like (the only lines that change from the original are the the last few ones):
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
//Setting up the StackPanel
StackPanel sp = new StackPanel();
sp.OpacityMask = opacityMask;
//Showing the image
sp.Children.Add(image);
panel.Children.Add(sp);
Related
I'm trying to combine two rectangles that I need to create dynamically but I can't figure out how to draw them using .Data and I don't know how to convert from Windows.Shapes.Rectangle to Windows.Media.Geometry.
Rectangle Cross1 = new Rectangle();
Cross1.Margin = new Thickness(465, -140, 0, 0);
Cross1.Height = 110;
Cross1.Width = 15;
Cross1.RenderTransform = rotateTransform1;
Rectangle Cross2 = new Rectangle();
Cross2.HorizontalAlignment = HorizontalAlignment.Left;
Cross2.VerticalAlignment = VerticalAlignment.Top;
Cross2.Margin = new Thickness(362, -103, 0, 0);
Cross2.Height = 110;
Cross2.Width = 15;
Cross2.RenderTransform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);
The CombinedGeometry class only works with other System.Windows.Media.Geometry objects, not System.Windows.Shapes. You need to use the equivalent RectangleGeometry class instead.
Something such as:
RectangleGeometry Cross1 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross1.Transform = rotateTransform1;
RectangleGeometry Cross2 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross2.Transform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);
I am trying to create a 50 x 50 square that has half of the rectangle white and the other half black (the lines going vertically instead of horizontally). I have the following code, but it is not filling the rectangle as expected. How do I make it 50% white and 50% black?
System.Windows.Shapes.Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
DrawingBrush blackBrush = new DrawingBrush();
GeometryDrawing backgroundSquare = new GeometryDrawing(System.Windows.Media.Brushes.White,null,new RectangleGeometry(new Rect(25, 0, 50, 50)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(25, 0, 100, 100)));
GeometryDrawing checkers = new GeometryDrawing(new SolidColorBrush(Colors.Black), null, gGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
blackBrush.Drawing = checkersDrawingGroup;
blackBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
blackBrush.TileMode = TileMode.Tile;
swatch.Fill = blackBrush;
sp_Thumbnails.Children.Add(swatch);
Its simple to have three sections just have one more GeometryDrawing object within your drawingGroup.
you can also configure the number of GeometryDrawing will be there within your drawingGroup as below.
Please see the generic solution to your problem that will display horizontal sections as per the groupCount value.
public void CreateRectangle(int groupCount)
{
Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
double groupsize = 100 / groupCount;
DrawingBrush blackBrush = new DrawingBrush();
DrawingGroup checkersDrawingGroup = new DrawingGroup();
//Considering 3 as groupCount
List<SolidColorBrush> brushes = new List<SolidColorBrush>() { Brushes.Black, Brushes.White,Brushes.Red };
double location = 0;
for (int i = 0; i < groupCount; i++)
{
GeometryDrawing drawing = new GeometryDrawing(brushes[i] , null,
new RectangleGeometry(new Rect(0, location,groupsize,groupsize)));
checkersDrawingGroup.Children.Add(drawing);
location += groupsize;
}
blackBrush.Drawing = checkersDrawingGroup;
swatch.Fill = blackBrush;
brdrect.Children.Add(swatch);
}
To fill your rectangle half with black and half with white. I modified your code as below. This will create a rectangle with lines separating two sections vertically.
Rectangle swatch = new System.Windows.Shapes.Rectangle();
swatch.Width = 50;
swatch.Height = 50;
DrawingBrush blackBrush = new DrawingBrush();
GeometryDrawing backgroundSquare = new GeometryDrawing(Brushes.White, null,
new RectangleGeometry(new Rect(0, 0, 25, 25)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(25, 0, 25, 25)));
GeometryDrawing checkers = new GeometryDrawing(Brushes.Black, null, gGroup);
DrawingGroup checkersDrawingGroup = new DrawingGroup();
checkersDrawingGroup.Children.Add(backgroundSquare);
checkersDrawingGroup.Children.Add(checkers);
blackBrush.Drawing = checkersDrawingGroup;
swatch.Fill = blackBrush;
brdrect.Children.Add(swatch);
If you want your sections to be spliced horizontally then you will need few changes in above code.
just modify the rectangle drawing creation section as below.
GeometryDrawing backgroundSquare = new GeometryDrawing(Brushes.White, null,
new RectangleGeometry(new Rect(0, 0, 25, 25)));
GeometryGroup gGroup = new GeometryGroup();
gGroup.Children.Add(new RectangleGeometry(new Rect(0, 25, 25, 25)));
GeometryDrawing checkers = new GeometryDrawing(Brushes.Black, null, gGroup);
I'm trying to generate some UI Elements dynamically. The whole thing works, except it seems like the textblocks are invisible.
Grid pGrid = this.createPodiumGrid();
//create textblocks etc
TextBlock bTijd = new TextBlock();
bTijd.Text = currentGig.BeginTijd;
bTijd.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Grid.SetColumn(bTijd, 0);
Grid.SetRow(bTijd, 0);
pGrid.Children.Add(bTijd);
TextBlock pName = new TextBlock();
pName.Text = currentGig.Podium.Naam;
pName.Margin = new Thickness(20, 0, 0, 0);
pName.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
Grid.SetColumn(pName, 1);
Grid.SetRow(pName, 0);
pGrid.Children.Add(pName);
Image favImg = new Image();
favImg.Source = new BitmapImage(new Uri("/Images/thumb.png", UriKind.RelativeOrAbsolute));
favImg.Width = 50;
favImg.Height = 50;
favImg.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
Grid.SetColumn(favImg, 2);
Grid.SetRow(favImg, 0);
pGrid.Children.Add(favImg);
podiumStackPanel.Children.Add(pGrid);
The last image, does show on the right location. Am I missing something here? Text color is black on a white background. But I can't see the text. I'm 100% positive that the value is filled.
Change your code to the following:
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
You have set the color to transparent by adding the first '0'.
pName.Foreground = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));
The first parameter of Color.FromArgb is the alpha channel. That is, the opacity. And you're setting it to 0, which explains why the TextBlock is invisible. Just set it to 255 instead:
pName.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
Or use the Colors enumeration:
pName.Foreground = new SolidColorBrush(Colors.Black);
You have made their Foreground transparent by setting a zero alpha value in Color.FromArgb.
Set the Foreground to Colors.Black instead, e.g.
bTijd.Foreground = new SolidColorBrush(Colors.Black);
or of course
bTijd.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
I want to add path to image because I want to make curves on image. I don't know how can add curves to images. I want to draw shape on image and don't want to use canvas. because I want to convert line to Raster image this is my code:
Ellipse circle = new Ellipse();
circle.BeginInit();
circle.Height = 100;
circle.Width = 100;
circle.Stroke = System.Windows.Media.Brushes.Black;
circle.StrokeThickness = 1.0;
circle.Margin = new Thickness(0, 0, 0, 0);
circle.EndInit();
circle.Measure(new Size(200, 200));
circle.Arrange(
new Rect(new Size(200, 200)));
circle.UpdateLayout();
Line line = new Line();
line.BeginInit();
line.X1 = 0;
line.Y1 = 0;
line.X2 = 300;
line.Y2 = 300;
line.Stroke = System.Windows.Media.Brushes.Magenta;
line.StrokeThickness = 1;
line.EndInit();
line.Measure(new Size(300, 300));
line.Arrange(new
Rect(new Size(300, 300)));
SolidColorBrush blueBrush = new SolidColorBrush();
blueBrush.Color = Colors.Blue;
SolidColorBrush blackBrush = new SolidColorBrush();
blackBrush.Color = Colors.Black;
// Create a Path with black brush and blue fill
Path bluePath = new Path();
bluePath.BeginInit();
bluePath.Stroke = blackBrush;
bluePath.StrokeThickness = 3;
bluePath.Fill = blueBrush;
// Create a line geometry
LineGeometry blackLineGeometry = new LineGeometry();
blackLineGeometry.StartPoint = new Point(20, 200);
blackLineGeometry.EndPoint = new Point(300, 200);
// Create an ellipse geometry
EllipseGeometry blackEllipseGeometry = new EllipseGeometry();
blackEllipseGeometry.Center = new Point(80, 150);
blackEllipseGeometry.RadiusX = 50;
blackEllipseGeometry.RadiusY = 50;
// Create a rectangle geometry
RectangleGeometry blackRectGeometry = new RectangleGeometry();
Rect rct = new Rect();
rct.X = 80;
rct.Y = 167;
rct.Width = 150;
rct.Height = 30;
blackRectGeometry.Rect = rct;
// Add all the geometries to a GeometryGroup.
GeometryGroup blueGeometryGroup = new GeometryGroup();
blueGeometryGroup.Children.Add(blackLineGeometry);
blueGeometryGroup.Children.Add(blackEllipseGeometry);
blueGeometryGroup.Children.Add(blackRectGeometry);
// Set Path.Data
bluePath.Data = blueGeometryGroup;
bluePath.EndInit();
bluePath.Measure(new Size(300, 300));
bluePath.Arrange(new Rect(new Size(300, 300)));
RenderTargetBitmap RTbmap = new
RenderTargetBitmap(200, 200, 96, 96,
PixelFormats.Default);
RTbmap.Render(bluePath);
var renderTargetBitmap = RTbmap;
var bitmapImage = new BitmapImage();
var bitmapEncoder = new BmpBitmapEncoder();
bitmapEncoder.Frames.Add(BitmapFrame.Create(renderTargetBitmap));
using (var stream = new System.IO.MemoryStream())
{
bitmapEncoder.Save(stream);
stream.Seek(0, System.IO.SeekOrigin.Begin);
bitmapImage.BeginInit();
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.UriSource = new Uri("C:\\Users\\ErnaGroup.Com\\Pictures\\Pictures\\cartoon-ice-cream-3 - Copy.jpg"); // I want to add line to this image.
bitmapImage.StreamSource = stream;
bitmapImage.EndInit();
}
image1.Source = bitmapImage;
}
How can I do this?
Image is not a container control. You definitely need a container control like Canvas to hold your shapes.
Alternatively you can set your BitmapImage as Background of Canvas using ImageBrush and draw Path/Line/Ellipse on Canvas and later you can save your drawing on Canvas as a JPG image.
<Canvas>
<Canvas.Background>
<ImageBrush ImageSource="Your BitmapImage Path"></ImageBrush>
</Canvas.Background>
</Canvas>
Then you can save your modified data as a JPG image
public static void CreateBitmapFromVisual(Visual target, string filename)
{
// target will be your Canvas
// filename is the path where you want to save the image
if (target == null)
return;
Rect bounds = VisualTreeHelper.GetDescendantBounds(target);
RenderTargetBitmap rtb = new RenderTargetBitmap((Int32)bounds.Width, (Int32)bounds.Height, 96, 96, PixelFormats.Default);
rtb.Render(target);
JpegBitmapEncoder jpg = new JpegBitmapEncoder();
jpg.Frames.Add(BitmapFrame.Create(rtb));
using (Stream stm = File.Create(filename))
{
jpg.Save(stm);
}
}
I use WriteableBitmap to set pixel in Wpf. but when I used writePixels method to change the color of pixels it's change color to black :(. It's my code snap:
ofdOpen.ShowDialog();
BitmapImage img = new BitmapImage(new Uri(ofdOpen.FileName));
WriteableBitmap wbmap = new
WriteableBitmap(img);
byte[] pixels = new byte[
wbmap.PixelHeight*wbmap.PixelWidth*
wbmap.Format.BitsPerPixel/8];
pixels[0] =255;
pixels[1] = 0;
pixels[2] = 0;
pixels[3] = 255;
wbmap.WritePixels(
new Int32Rect(0, 0,
wbmap.PixelWidth, wbmap.PixelHeight),
pixels,
wbmap.PixelWidth * wbmap.
Format.BitsPerPixel / 8, 0);
image1.Source = wbmap;
I'm googling too much. but I couldn't find any source about this problem.
It's appearing black because you're rewriting the entire contents of the image, not just a few pixels. Your pixels array is declared to be to be the size of the entire image, but you are only setting two of the first four bytes of color data. So, when you call WritePixels, it's redrawing the entire image with the provider color data, which is almost all 0's.
To correct this, only declare the pixels array to be the size of the pixels you want to write.
Finllay I found solution:
BitmapImage originalIamge = new BitmapImage();
originalIamge.BeginInit();
originalIamge.UriSource = new Uri(ofdOpen.FileName);
originalIamge.EndInit();
BitmapSource bitmapSource = new FormatConvertedBitmap(originalIamge, PixelFormats.Bgr32, null, 0);
wbmap = new WriteableBitmap(bitmapSource);
h = wbmap.PixelHeight;
w = wbmap.PixelWidth;
pixelData = new int[w * h];
widthInByte = 4 * w;
wbmap.CopyPixels(pixelData, widthInByte, 0);
image1.Source = wbmap;
Point absoluteScreenPos = PointToScreen(Mouse.GetPosition((IInputElement)sender));
Image img = new Image();
BitmapImage point = new BitmapImage(
new Uri("Images/Dott.png",
UriKind.Relative));
img.Source = point;
var rt = ((UIElement)image1).RenderTransform;
var offsetX = rt.Value.OffsetX;
var offsetY = rt.Value.OffsetY;
int newX = (int)Mouse.GetPosition((IInputElement)sender).X;
int newY = (int)Mouse.GetPosition((IInputElement)sender).Y;
for (int i = 0; i < 400; i++)
{
pixelData[i] = 0x000000ff;
}
wbmap.WritePixels(new Int32Rect(newX,newY,10,10), pixelData, widthInByte, 0);
image1.Source = wbmap;