In building a program that displays a map, I have two sliders:
that changes the map's pitch
that rotates the map's heading
And, two Buttons that change the Zoom_Level of the map
I have close to 200 images that need to be displayed on the map at any given time based on the zoom level. (each one is click-able)
With so many Images, I'm getting an:
"A first chance exception of type 'System.OutOfMemoryException' occurred in System.Windows.ni.dll"
thrown.
Many of these Images are the same - just displayed in different places. I find it very inefficient that I need to initialize each different Image separately and place it inside it's own MapOverlay instead of referencing a globally constructed Image and referencing it when I need it. (there is also a problem with Clearing the Map.Layers when the Images are defined globally).
Is there a better way to add many Images to a map?
After I hit about 50 Images I get the OutOfMemoryException (the Images need to be defined separately so that they are square in dimension for the rotating to work properly).
Does it matter how the Images are added to the Project/App ("Build Action" or the "Copy to Output Directory")? Would it be better to have them in Isolated Storage? Would this make a difference?
Here is the code I'm currently using to add Images:
MapLayer pinLayerZoom12 = new MapLayer();
MapOverlay pinOverlay = new MapOverlay();
// Add the location of the Pushpin using latitude and longitude.
pinOverlay.GeoCoordinate = new GeoCoordinate(49.33783000, -0.45215600);
Image pinOverlayImage = new Image();
pinOverlayImage.Source = new BitmapImage(new Uri("images/Hedgehog.png", UriKind.Relative));
pinOverlay.Content = pinOverlayImage;
pinOverlay.PositionOrigin = new Point(0.0, 0.0);
pinOverlayImage.Opacity = 0.8;
pinOverlayImage.Height = 10;
pinOverlayImage.Width = 10;
pinOverlayImage.Tap += pinOverlayImage_Tap;
pinLayerZoom12.Add(pinOverlay);
MapOverlay pinOverlay2 = new MapOverlay();
// Add the location of the Pushpin using latitude and longitude.,
pinOverlay2.GeoCoordinate = new GeoCoordinate(49.33783000, -0.44547083);
Image pinOverlay2Image = new Image();
pinOverlay2Image.Source = new BitmapImage(new Uri("images/Hedgehog.png", UriKind.Relative));
pinOverlay2.Content = pinOverlay2Image;
pinOverlay2.PositionOrigin = new Point(0.0, 0.0);
pinOverlay2Image.Opacity = 0.8;
pinOverlay2Image.Height = 10;
pinOverlay2Image.Width = 10;
pinOverlayImage.Tap += pinOverlayImage2_Tap;
pinLayerZoom12.Add(pinOverlay2);
// Add the layer to the map
map1.Layers.Add(pinLayerZoom12);
Thank you for any help you can give me!
Related
Hey everyone so I am having some trouble trying to get this to work correctly. I have a MC Object called character and another called "points". I have a container object called planetContainer I add the character to the planetContainer the character is rotating around the planets that are also added to the container. The main issue I am having is when the points power up is activated I want the points to move off the other planets and to the charactercenter position. It was working perfect but had to update some code and remove the Points out of the planetContainer and attach them to the planets instead. I know I might have to use localToGlobal but not too sure.
Here is how I setup the character:
private function newCounterClockWise():void
{
planetContainer.addChild(character);
character.rotation = (Math.atan2(character.y - planetHit.y, character.x - planetHit.x) * 180 / Math.PI);
}
How the points are added to the Planets:
private function addPoints():void
{
points = new mcPoints();
var planetPosition:Point = planetContainer.parent.localToGlobal(new Point(0, 0));
points.x = planetPosition.x;
points.y = planetPosition.y;
outerPlanets.addChild(points);
aPointsArray.push(points);
}
Now this is the main function that handles the points to move to the character but it is not working correctly. The points move but they move off the screen or cause the game to kinda tweak out and do different things. Also the "magnetHandler(); is in my EnterFRame Event:
private function magnetHandler():void
{
for (var i:int = 0; i < aPointsArray.length; i++)
{
var currentPoints:mcPoints = aPointsArray[i];
var characterPosition:Point = planetContainer.parent.globalToLocal(new Point(character.x, character.y));
if (currentPoints.hitTestObject(playScreen.mcPointsHit))
{
trace("POINTS MID STAGE");
currentPoints.x -= (currentPoints.x - characterPosition.x);
currentPoints.y -= (currentPoints.y - characterPosition.y);
//currentPoints.x = character.x;
//currentPoints.y = character.y;
//TweenMax.to(currentPoints, 0.5, {x:characterGlobalPosition.x, y:characterGlobalPosition.y , ease:Power1.easeInOut } );
}
}
}
Can anyone see what I am doing wrong?
It's a hard to understand your question fully (or to understand why you're putting things that relate to each other in separate containers), but likely this line is where it's falling down:
var characterPosition:Point = planetContainer.parent.globalToLocal(new Point(character.x, character.y));
What you want to do, is get the characters x/y coordinates in the currentPoints parent space. To do that, you would do something like this:
//first, find the global position of character:
var globalCharacterPoint:Point = character.localToGlobal(new Point());
//then, convert that to the currentPoints parent local space:
var localCharacterPoint:Point = currentPoints.parent.globalToLocal(globalCharacterPoint);
Also, in this code of yours:
points = new mcPoints();
var planetPosition:Point = planetContainer.parent.localToGlobal(new Point(0, 0));
points.x = planetPosition.x;
points.y = planetPosition.y;
You are getting the global space of the planetContainer's parent, which is probably NOT what you want. You likely want:
planetContainer.localToGlobal(new Point()); //this gives you the global location of the planet container's top left corner
And, since you're adding the points object to outerPlanets, you probably want to convert to its local space (unless it's positioned at 0,0 globally - then it doesn't especially matter).
var outerPoint:Point = outerPlanets.globalToLocal(planetPosition);
points.x = outerPoint.x;
points.y = outerPoint.y;
Needless to say, for games it's best to have everything in the global coordinate space unless it's truly encapsulated assets (like smoke on a rocket etc.)
We're making bitmap data from a sprite where we want to take an image and rotate within / scale to fit. This is our code, which includes a rotation.
_rotation defines how much the user has input.
The problem is, we're getting an output file that is 100% white.
We think that the image is rotating about 0x0y therefore rotating the image outside the bounds of the sprite.
Furthermore, the image is not scaling to the child, instead is sort of "cropping" as it inherits.
What is the best way of doing this? Basically we want to take an image and rotate within / scale to fit
var sprite1:Sprite = new Sprite();
addChild(sprite1);
var photoBitmap:Bitmap = new Bitmap(_bitmapData);
sprite1.addChild(photoBitmap);
sprite1.rotation = _rotation;
var sprite2:Sprite = new Sprite();
addChild(sprite2);
sprite2.addChild(sprite1);
var bitmapData:BitmapData = new BitmapData(sprite2.width,sprite2.height,false,0xFFFFFF);
bitmapData.draw(sprite2);
The simple way to draw sprite with scaling/rotating is using Matrix in method bitmapData.draw().
Example:
var sourceImage:SomeSprite = new SomeSprite();
var matrix:Matrix = new Matrix();
matrix.scale(0.5, 0.5);
matrix.rotate(0.5 * Math.PI);
var newImage:BitmapData = new BitmapData(sourceImage.width/2, sourceImage.height/2);
newImage.draw(sourceImage, matrix);
Your issue is likely a cause of rotating around the top left corner (which can make the entire object left of or above the registration point (0 x and 0 y) and not get drawn.
An easy way you can account for this, is to move sprite1 after the rotation to account for the new size and position caused by rotating:
...
sprite2.addChild(sprite1);
var actualPosition:Rectangle = sprite2.getBounds(sprite2); //this gets the new position/dimensions of the object
sprite1.x = -actualPosition.x;
sprite1.y = -actualPosition.y;
var bitmapData:BitmapData = new BitmapData(sprite2.width,sprite2.height,false,0xFFFFFF);
...
I've been looking for the solution for some time and haven't yet found it. One of the functions of my app is to load an image and then to change its shape - e.g. I load a normal rectangular image, and then there are 2-3 buttons - change the image to a circle, triangular or some other shape. Is sth like that even possible with Bitmaps? I found a lot of interesting things about Nokia imaging SDK, but all the shape stuff i found was LensBlurEffect, which isn't exactly what i need.
If someone could point me in the right direction, I would be really grateful!
Thank You in advance for help!
Best regards,
Roman
I'm working on filters that draws shapes using Nokia Imaging SDK. To solve your problem, I created sample project that uses Nokia Imaging SDK's blend filter and my custom shape filters.
Actually you can do the same thing with shape image as David refers (background is black, foreground white) instead of using my custom filters (EllipseShapeFilter above example code).
Here is sample code;
var ellipseImage = new WriteableBitmap(1024, 768);
Rect origin = new Rect(new Point(512, 384), new Size(512, 384));
uint white = 0xff000000 | (255 << 16) | (255 << 8) | 255;
var image = LoadFromResources(new Uri(#"/BlendImageSample;component/Assets/Sample.jpg", UriKind.Relative));
using (var ellipseSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var ellipse = new EllipseShapeFilter(ellipseSource, white, origin))
{
ellipseImage = await new WriteableBitmapRenderer(ellipse, ellipseImage).RenderAsync();
}
ImageViewer.Source = ellipseImage;
using (var backgroundSource = new BitmapImageSource(ellipseImage.AsBitmap()))
using (var foregroundSource = new BitmapImageSource(image.AsBitmap()))
using (var filterEffect = new FilterEffect(backgroundSource))
{
using (BlendFilter blendFilter = new BlendFilter())
{
blendFilter.ForegroundSource = foregroundSource;
blendFilter.BlendFunction = BlendFunction.Darken;
filterEffect.Filters = new[] { blendFilter };
var OutputBitmap = new WriteableBitmap(image.PixelWidth, image.PixelHeight);
var result = await new WriteableBitmapRenderer(filterEffect, OutputBitmap).RenderAsync();
ImageViewer.Source = result;
}
}
Github - BlendImageSample
Well the bitmap is always going to be rectangular, there is nothing you can do about that.
What you can do is make some pixels transparent, thus making the bitmap appear of a different shape.
One way to do this using the Nokia Imaging SDK is to use the BlendFilter to blend a transparent image (I suggest just a ColorImageSource) over the original image. You can provide different masks to create different "shapes."
I am building a windows phone 8 camera app. After a photograph has been taken i want to give the user the option of cropping specific part of the image. Like if there are some specific objects in the image, when crop option is selected, it should highlight or outline that specific part of the image, and it should be able to crop it, rather than manually cropping it.
Any specific ways to do it?.
Thanks In advance.
One way would be to create a WriteableBitmap and do a TranslateTransform of the original image into the WritableBitmap. Something like::
Image workImage = new Image { Source = originalImage, Width = originalWidth, Height = originalHeight };
WriteableBitmap writeableBitmap = new WriteableBitmap(newWidth, newHeight);
writeableBitmap.Render(temporaryImage, new TranslateTransform { X = (originalWidth – newWidth) / -2, Y = (originalHeight – newHEight) / -2 });
writeableBitmap.Invalidate();
//... or some other stream
Stream newImageStream = new MemoryStream();
//set whatever quality settings you like if 75 is no good
writeableBitmap.SaveJpeg(newImageStream, newWidth, newHeight, 0, 75);
// TODO: do something with newImageStream
I have an Image that's 5000 pixels by 5000 pixels. It's scaled up and down regularly to fit different parts of the image into the window.
I'm making a function that focuses in on different places on the image (like a map) and then zooms into a certain scale that I specify.
I pass my point into this function (new Point(2000,2500) for example)) however this always breaks because it's not relative to the image specifically.
How do I make the Point relative to the image at the image's given scale at any given time?
Additional Info: I'm using the guide here http://www.adobe.com/devnet/flex/samples/fig_panzoom.html for panning and zooming functionality.
Solved:
One of my pitfalls was that I was using a possible bitmapScaleFactor > 1 which would mess up the scaling. This was the final function that worked for my usage.
protected function testFocus(p:Point):void
{
var content:ContentRectangle = boardViewer._contentRectangle;
var panToPoint:PanToPointCommand = new PanToPointCommand(boardViewer, content);
var scale:Number = boardViewer.bitmapScaleFactor;
var location = new Point((p.x*scale)+content.x, (p.y*scale)+content.y);
var center = new Point(boardViewer.width/2, boardViewer.height/2);
//Move the point to the center
panToPoint.fromPoint = location;
panToPoint.toPoint = center;
panToPoint.execute();
}
I've not tested this but how about using the scale factor that is being applied to the image to alter the point coordinates.
e.g.
var scaler:Number = 0.5;
image.scaleX = image.scaleY = scaler;
new Point(2000*scaler,2500*scaler);
Are you looking for DisplayObject.mouseX/mouseY? These do not take any rotation into account, however.
To take rotation into account, you could do something like (untested code):
var mat:Matrix = image.transform.concatenatedMatrix;
mat.invert();
// now use mat to transform point from 'stage space' to 'image space'
var pImage:Point = mat.transform(new Point(stage.mouseX, stage.mouseY));