clipped image not visible on Tablet EaselJS + sourceRect used - mobile

i am working on a Mobile project (iPad with iOS 8.0.2);
I want to make clipping of my immage in order to display less from it.
When displaying on PC it works perfectly well, while we test it on the tablet the clipped image is not displayed at all.
Do you have any suggestions
this.background = new createjs.Bitmap('some_image.png');
//create a clipping of drawn image!
var dims = this.background.getBounds();
this.background.sourceRect = new createjs.Rectangle(0, 15, dims.width, dims.height);
this.background.x = 248;
this.background.y = 86;
this.stage.addChild(this.background);

I met the same trouble like this.I have given up using Bitmap to clipping the image. I have found another solution ,here is "
easeljs splitting an image into pieces
".Good luck.

I am working out, the code like this:
var img, stage;
function init() {
//wait for the image to load
img = new Image();
img.onload = handleImageLoad;
img.src = "./res/image.png";
}
function handleImageLoad(evt) {
// create a new stage and point it at our canvas:
stage = new createjs.Stage("canvas");
// create a new Bitmap, and slice out one image from the sprite sheet:
var bmp = new createjs.Bitmap(evt.target).set({x:200, y:200});
bmp.sourceRect = new createjs.Rectangle(916, 101, 84, 84);
//x,y,width,height
stage.addChild(bmp);
stage.update();
}
This is the example:
https://github.com/CreateJS/EaselJS/blob/master/examples/Filters_animated.html

Related

Unable to capture WPF livechart in bitmap

I'm trying to write a function that will write the results of a test (which have both text output and chart output, stored in a textbox and a livecharts chart respectively) to a pdf file. There are no issues with the text output, but I haven't been able to get the charts to save unless I extract each chart from its parent stackpanel (each test has a stackpanel that is shown when the test is selected) and then display the chart in a separate window. There is a lot of code around the problematic lines, so I'm going to paste a shortened version below.
The issue seems to be calling "_saveWindow.Show()" instead of ".ShowDialog". I need this to open and close without user input, but the "Show()" doesn't draw the chart in the window at all.
Any ideas why this is happening?
foreach (TestSequenceItem tsi in resultsToSave)
{
tsi.Instances[0].ChartStackPanel.Visibility = Visibility.Visible;
for (int i=0; i<tsi.Instances[0].StackChartList.Count; i++)
{
Chart _saveChart = tsi.Instances[0].StackChartList[i];
tsi.Instances[0].ChartStackPanel.Children.Remove(_saveChart);
ScrollViewer panel = new ScrollViewer { Content = _saveChart };
Window _saveWindow = new Window { Content = panel };
_saveWindow.Show();
var encoder = new PngBitmapEncoder();
RenderTargetBitmap bmp = new RenderTargetBitmap((int)tsiChartDoc.DefaultPageSetup.PageWidth, 600, 96, 96, PixelFormats.Pbgra32);
bmp.Render(_saveChart);
encoder.Frames.Add(BitmapFrame.Create(bmp));
using (MemoryStream stm = new MemoryStream())
{
encoder.Save(stm);
string fileName = "base64:" + Convert.ToBase64String(stm.ToArray());
// Adding a heading to the pdf
tsiChartDoc.LastSection.AddParagraph(tsi.Instances[0].StackTitleList[i].Text, "Heading2");
tsiChartDoc.LastSection.AddImage(fileName);
}
_saveWindow.Close();
panel.Content = null;
tsi.Instances[0].ChartStackPanel.Children.Insert(chartIdx, _saveChart);
}
}

How do I export my wpf InkCanvas with the proper size?

I'm trying to create a simple sketching application.
But I've ran into a weird problem. I have a Surface Pro 3 that I'm working on, with a DPI of 144, according to some system settings.
When I save the image from my app, using 96 as the dpi, it produces an image that's just a little bit smaller. Which is kind of weird.
Is there a way that I can either a) scale the canvas/strokes up that I'm saving, or tell the RenderTargetBitmap to scale properly? If I just stick 144 in there, I get the proper scale for the strokes, but my canvas size is borked.
My canvas saving code looks like this:
public void saveCanvas(object sender, RoutedEventArgs e){
this.save_filename = this.save_filename ?? this.getSaveFilename();
if (save_filename != null){
var cantwo = new InkCanvas();
cantwo.Strokes.Clear();
cantwo.Strokes.Add(this.canvas.Strokes);
cantwo.Background = this.canvas.Background;
var size = new Size(this.canvas.ActualWidth, this.canvas.ActualHeight);
cantwo.Height = size.Height;
cantwo.Width = size.Width;
cantwo.Measure(size);
cantwo.Arrange(new Rect(size));
var transform = this.canvas.LayoutTransform;
var rtb = new RenderTargetBitmap((int)this.canvas.ActualWidth, (int)this.canvas.ActualHeight, dpiX, dpiY, PixelFormats.Default);
rtb.Render(cantwo);
try {
using(var fs = File.Open(this.save_filename, FileMode.Create)){
var encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
encoder.Save(fs);
}
}
catch(IOException){
MessageBox.Show("Failed to save image", "ERROR: Save Failed");
}
// Restore transformation if there was one.
this.canvas.LayoutTransform = transform;
}
}
How can I save my image at the same size/resolution/dpi as my canvas? (Or draw on my canvas at the same dpi/scale as I save my image)?
Instead of creating a second InkCanvas, draw a Rectangle that is filled with a VisualBrush into a DrawingVisual:
var rect = new Rect(canvas.RenderSize);
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
dc.DrawRectangle(new VisualBrush(canvas), null, rect);
}
var rtb = new RenderTargetBitmap(
(int)rect.Width, (int)rect.Height, 96, 96, PixelFormats.Default);
rtb.Render(visual);

How to set ImageView to show different position in PNG? (Android sprite alike animations)

I have the following png:
Each Icon is 100X100 px. All in all 800X100 px.
I have the following ImageView xml:
<ImageView
android:id="#+id/CycleStageImage"
android:layout_width="100dp"
android:layout_height="100dp">
I would like to set CycleStageImage to be show different Icon (100,100) on Timer Interval of 1 Second back and forth.
I am having a problem generating a code that moves on Axis of this PNG.
I have tried the followings from multiple links over SOF, but with no luck:
//first try - not working
//Resources res = mainActivity.ApplicationContext.Resources;
//Bitmap bitmap = BitmapFactory.DecodeResource(res, Resource.Id.CycleImage);
//BitmapDrawable bitmapDrawable = new BitmapDrawable(Resources.System, bitmap);
//ClipDrawable clipDrawable = new ClipDrawable(bitmapDrawable, GravityFlags.Center, ClipDrawable.Horizontal);
//clipDrawable.SetBounds(100, 100, 100, 100);
//clipDrawable.SetLevel(100);
//imageView.SetImageResource(Android.Resource.Color.Transparent);
//imageView.SetImageDrawable(clipDrawable);
//second try - shows only part of the left top corner
//double TUNNING = 0.5; //0.5 cut in half
//Bitmap srcBmp = BitmapFactory.DecodeResource(Resources.System, cycleStage);
//Bitmap modBmp = Bitmap.CreateBitmap(
// srcBmp,
// 0,
// srcBmp.Height, // TUNNING
// srcBmp.Height,
// srcBmp.Height
// );
//third try - same as the second try.
//int START_X = 0;
//int START_Y = 100;
//int WIDTH_PX = 100;
//int HEIGHT_PX = 100;
//// Crop bitmap
//Bitmap newBitmap = Bitmap.CreateBitmap(SOURCE_BITMAP, START_X, START_Y, WIDTH_PX, HEIGHT_PX, null, false);
//// Assign new bitmap to ImageView
//imageView.SetImageBitmap(newBitmap);
I have followed the Android tutorial:
https://developer.android.com/guide/topics/resources/drawable-resource.html#Clip
but with no luck..
It would be much appreciated the help with timer as well with the png.
Thanks!
Finally I got it to work, following these steps:
(Although I admit its a bit lame...)
I divided the above PNG into 8 (100x100) PNGs each using online tool -> PNG Splitter
I created a GIF using online tool - GIF Maker -> http://gifmaker.me/
I have placed the saved gif under "Assets" folder and changed its properties-> build action to "AndroidAsset"
I have created WebView and placed it inside my XML screen. it looks like this:
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyWebView"
android:layout_width="100dp"
android:layout_height="100dp"/>
In my Activity I generated the code as follows:
WebView myWebView = (WebView)findViewById(Resource.Id.MyWebView);
myWebView.loadUrl("file:///android_asset/Gif.gif");
It works like a charm!
I hope it will be of assistant to anyone who desires to accomplish running GIF's inside android application.
Good Luck.

Silverlight Image Cropping

Does anybody knows how to image cropping in silverlight without any library.
I have Child window and inside the child window I havev a image and this image center one rectange is there so I can panning the image to the around the rectange and selecet the perticular part of the image and this selected part I want to crop.
Also I am using WriteableBitmap and try to Crop, this will not work if correct me if I am wrong.
sheetRectangle.Children is the Image.
foreach (ucPicRect item in sheetRectangle.Children)
{
WriteableBitmap obj = new WriteableBitmap(item.imgCell.Source as BitmapSource);
obj.Crop(0,0,400,400);
obj.Invalidate();
item.imgCell.Effect = dlgcwEditPhoto.imgEdit.Effect;
item.imgCell.Source = obj;// dlgcwEditPhoto.imgEdit.Source;
}
Thanks...!!!
you can use this utility function to crop your image
public static WriteableBitmap cropImage(Image image, double[] coordonnee)
{
Image cloneImage = new Image();
cloneImage.Source = image.Source;
RectangleGeometry myRec = new RectangleGeometry();
myRec.Rect = new Rect(coordonnee[0], coordonnee[1], coordonnee[2], coordonnee[3]);
cloneImage.Clip = myRec;
TranslateTransform t = new TranslateTransform();
t.X = -coordonnee[0];
t.Y = -coordonnee[1];
WriteableBitmap wb = new WriteableBitmap(cloneImage, t);
wb.Invalidate();
return wb;
}
good luck !!

silverlight bing maps pushpin question

I'm trying to use the microsoft_maps_mapcontrol. I see how one could create a pushpin and the lat long location... but i can't figure out how to instead use an image in place of that pushpin. doesn't look like pushpin will allow using a different image. So, that being the case how do you create an image and then wire it to the proper spot. Once wired can will i be able to use an event for when that image is clicked on.
thanks
shannon
added 3/2/2010
I've looked at the example given at http://www.microsoft.com/maps/isdk/silverlightbeta/#MapControlInteractiveSdk.Tutorials.UIElements.Media.TutorialPositionPointMedia
and i must not be converting something correctly to vb.
Here is there code
Image image = new Image();
image.Source = new BitmapImage(new Uri(ImageUriValue.Text, UriKind.RelativeOrAbsolute));
double opacity;
if (double.TryParse(OpacityText.Text, out opacity))
{
image.Opacity = opacity;
}
image.ImageFailed += MediaFailed;
Point point = GetPoint();
Canvas.SetLeft(image, point.X);
Canvas.SetTop(image, point.Y);
myCanvas.Children.Add(image);
element = image;
and what i converted it to
Dim image As New Image()
image.Source = New BitmapImage(New Uri("\Images\1.png", UriKind.RelativeOrAbsolute))
Canvas.SetLeft(image, 100)
Canvas.SetTop(image, 100)
myCanvas.Children.Add(image)
element = image
Hopefully that helps in spotting what i'm not doing correctly.
thanks
shannon
Here's a code snippet that should show you how to add an image.
public void addImageToMap()
{
MapLayer imageLayer = new MapLayer();
Image image = new Image();
//Define the URI location of the image
image.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("myimage.png", UriKind.Relative));
//Define the image display properties
image.Opacity = 0.8;
image.Stretch = System.Windows.Media.Stretch.None;
//The map location to place the image at
Location location = new Location() { Latitude = -45, Longitude = 122 };
//Center the image around the location specified
PositionOrigin position = PositionOrigin.Center;
//Add the image to the defined map layer
imageLayer.AddChild(image, location, position);
//Add the image layer to the map
TestMap.Children.Add(imageLayer);
}
http://msdn.microsoft.com/en-us/library/ee681895.aspx

Resources