Change Image already on Stage as3 - image

Okay this solution seems to not be findable.
I have a border type image on stage (circular) and I am dynamically loading an image from xml in my document class. I have a place holder image inside the border. Can I replace that image with the one that is dynamically loaded?
Or do I have to addChild and then scale and transform it all through code?

I would just remove the place holder image and add the new image into the same container and scale/position it. It is simple to do with code.
container.removeChild(placeHolderImage);
container.addChild(newLoadedImage);
newLoadedImage.scaleX = newLoadedImage.scaleY = 1.5;
newLoadedImage.x = 100;
newLoadedImage.y = 100;
You can possibly draw into the bitmap data of the image already on screen but I don't see any downsides with just removing the old one and adding the new image.

Related

How to fill the CCLayer with a background image?

After adding my image located in the resources I notice that my image appears only at the left bottom of the screen and in a reduced size.
How to fill the image as background on my CLLayer?
I tried adding the image as child and changed the Size of it's content but no success
CCSprite sprite = new CCSprite("img.png");
AddChild(sprite);
You can set AnchorPoint to AnchorMiddle,then image can be in center of CCLayer:
CCSprite sprite = new CCSprite ("ship.png");
sprite.AnchorPoint = CCPoint.AnchorMiddle;
AddChild(sprite);
If want image fill the CCLayer,it seems like that there is no way to change size of sprite.So maybe need to change size of image to be more large.
https://learn.microsoft.com/en-us/xamarin/graphics-games/cocossharp/entities#creating-the-ship-entity

Using SkiaSharp how would one darken the entire image (excluding the background)

The below snippet darkens the entire image but I wish to darken all the parts except the background. How would one go about doing this? You will notice the png below has no background so I am not sure why this doesn't work.
I am guessing it is something to do with how the image is loaded into memory from the file and alpha channels etc.
SKImage image = SKImage.FromBitmap(resourceBitmap);
var skImageFilter = SKImageFilter.CreateColorFilter(SKColorFilter.CreateBlendMode(AppColors.DarkGreyColor.ToSKColor(),
SKBlendMode.Darken));
image = image.ApplyImageFilter(
skImageFilter, new SKRectI(0,0, image.Width,image.Height), new SKRectI(0, 0, image.Width, image.Height), out SKRectI subSet, out SKPoint point);
This is possible by wrapping the SKImageFilter, taken from this other stack overflow question:
SKImageFilter.CreateBlendMode(SKBlendMode.DstIn,
SKImageFilter.CreateColorFilter(SKColorFilter.CreateBlendMode(AppColors.DarkGreyColor.ToSKColor(), SKBlendMode.Darken)));

vb6: place image control on frame dynamically

I'm working on a new UI-element in an vb6 programm. I need to place pictures dynamically on 2 diffenent colored background lines:
I tried out two different ideas but none of them is working:
Idea 1
I used image control and assigned an image to the control. Then I set left, top, with and hight properties to values where I want to place the image. Image was places at correct position but not in foregound on a frame but in background (behind coloured frame).
Can anyone tell me how I can place an image control in foreground (on green coloured frame)? I need to place these image controlls dynamically from code in running program.
Idea 2
In second sulution I tried to use picturebox instead of image control. Picturebox can be placed on colored background (frame) without any problems.
Here the problem is that loaded picture has to be scaled to size of picturebox picture property. Picture is loaded to picturebox by following code: Picture.Picture = LoadPicture("F:\img.JPG")
Does anyone know how I can scale this img to size of picturebox?
Can anyone help me to follow up one of the solutions. In principle I would prefere to use Image controls if it is polible to place them in foreground on frame.
I'm going to guess that after creating the image control, you are moving it onto the Frame. If so, this is why the control is behind the Frame. You really want the image to be inside the frame. The key to do this is to set the Container property.
Dim img As Image
Set img = Me.Controls.Add("VB.Image", "Image1")
If Not img Is Nothing Then
img.Move 200, 200, 400, 400
img.Stretch = True
img.Picture = LoadPicture("your image.jpg")
Set img.Container = Frame1
img.Visible = True
End If

How do I Crop Images in Flutter?

I searching an days for this question.
I want to Crop Images like that, in flutter:
GIF Source: https://github.com/ArthurHub/Android-Image-Cropper
The closest lib for this solution is the Image Lib, that lib offers manipulate images and crop, but i want to crop images in UI level like this gif. All libs I found dont offers that.
There is no widget that performs all that for you. However, I believe that it is possible to write that natively in flutter now. I don't have time at this particular moment to do it for you, but I can definitely point you in the right direction.
You're going to need to load the image in such a way that you can either draw it onto a canvas or use a RawImage to draw it rather than using the Image widget directly.
You need to figure out a co-ordinate system relative to the image
You'll need to find a way of drawing the crop indicator - you could do this either by drawing directly on the canvas or possibly using some combination of GestureDetector/Draggable/DropTarget. I'd suggest that sticking to Canvas might be the easiest to start.
Once the user has selected a part of the image, you need to translate the screen co-ordinates to picture co-ordinates.
You then have to create an off-screen canvas to draw the cropped image to. There are various transforms you'll have to do to makes sure the image ends up in the right place.
Once you've made the off-screen crop, you'll have to display the new image.
All of that is quite a lot of work, and probably a lot of finessing to get right.
Here's examples for a couple of the steps you'll need to do, but you'll have to figure out how to put them together.
Loading an image:
var byteData = await rootBundle.load("assets/image.jpg");
Uint8List lst = new Uint8List.view(byteData.buffer);
var codec = await UI.instantiateImageCodec(lst);
var nextFrame = await codec.getNextFrame();
var image = frameInfo.image;
Displaying an image on a canvas:
https://docs.flutter.io/flutter/dart-ui/Canvas/drawImageRect.html
https://docs.flutter.io/flutter/rendering/CustomPainter-class.html
Writing an image to a off-screen canvas:
ui.Image getCroppedImage(Image image, Rect src, Rect dst) {
var pictureRecorder = new ui.PictureRecorder();
Canvas canvas = new Canvas(pictureRecorder);
canvas.drawImageRect(image, src, dst, Paint());
return pictureRecorder.endRecording().toImage(dst.width.floor(), dst.height.floor());
}
You'll probably need to do something like this answer for getting the local coordinates of mouse/touch gestures.
Some advice - I'd start as simple as possible, not thinking about performance to start (i.e. draw everything each paint if needed, etc). Then once you get the basics working you can start thinking of optimization (i.e. using a RawImage, Transform, and Stack for the image and only re-drawing the selector, etc).
If you need any additional help let me know in a comment and I'll do my best to answer. Now that I've been writing about this a bit it does make me slightly curious to try implementing it so I may try at some point, but it probably won't be soon as I'm quite low on time at the moment. Good luck =D
The image_cropper plugin does exactly what you are looking for.

GWT canvas and image bundle [understanding questions]

I have used this code (kind of tutorial) at http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 ... In this code, I used the "Image Scale / Resize" code and I found something that I cannot explain. I mean, instead of using :
final Image img = new Image("/img/test.jpg");
I have used the client bundle and so the following code:
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());
And I do not have any error, but the image did not appears. Finally I found the solution with :
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());
Do you know the reason why ".getSafeUri()" solves the problem ?
See ImageResource in ClientBundle as real <img> element
An Image created with an ImageResource will unconditionally use a clipped image, where the image is set as a CSS background image (and the <img>'s src is a 1×1px transparent GIF). Because the image actually is a blank GIF, painting it to the canvas does nothing noticeable; canvas does not take CSS styles into account.
Using getSafeUri() you'll have the data: URL of the image, which will be used as the src of the <img>. No blank.gif here, so the image is correctly painted on the canvas.
Note however that getSafeUri() won't work in IE6 and IE7 by default. If you need to support them, you'll have to annotate your ImageResources with either #ImageOptions(preventInlining = true) or #ImageOptions(repeatStyle = RepeatStyle.Both). Alternately, you could use DataResources instead of ImageResources.

Resources