I have a series of banners (standard sizes) which all need to load the same corresponding image for each slide. I can load them fine but I want the image to match the size of the container MC that the image is being loaded to, is that possible? Either that or to set the height/width manually...
Everything I have tried doesnt work, here is the code for the working state (where it just loads the image which stretches across the stage)
Code:
var myImage:String = dynamicContent.Profile[0].propImage.Url;
function myImageLoader(file:String, x:Number, y:Number):StudioLoader{
var myImageLoader:StudioLoader = new StudioLoader();
var request:URLRequest = new URLRequest(file);
myImageLoader.load(request);
myImageLoader.x = -52;
myImageLoader.y =-30;
return myImageLoader;
}
propImage1.addChild(loadImage(enabler.getUrl(myImage),-20,0));
You can resize your loaded image after the Event.COMPLETE on the LoaderInfo (contentLoaderInfo) of your URLLoader is fired, so you can do like this :
var request:URLRequest = new URLRequest('http://www.example.com/image.jpg');
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
var image:DisplayObject = loader.content;
image.x = 100;
image.y = 100;
image.width = 300;
image.height = 200;
addChild(image);
}
loader.load(request);
Edit :
load_image('http://www.example.com/image.jpg');
function load_image(url){
var request:URLRequest = new URLRequest(url);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_loadComplete);
function on_loadComplete(e:Event):void {
add_image(loader.content);
}
loader.load(request);
}
function add_image(image:DisplayObject, _x:int = 0, _y:int = 0, _width:int = 100, _height:int = 100){
image.x = _x;
image.y = _y;
image.width = _width;
image.height = _height;
addChild(image);
}
Hope that can help.
Related
I'm using Xamarin.Forms + Urhosharp, I've got a problem to set texture from an image on a sphere. The problem is that texture.Load or texture.SetData always returns false. I did try different methods like SetData, Load, resize texture and image (to a power of 2 number) and ... but none of them worked. Here is my code:
private async void CreateScene()
{
Input.SubscribeToTouchEnd(OnTouched);
_scene = new Scene();
_octree = _scene.CreateComponent<Octree>();
_plotNode = _scene.CreateChild();
var baseNode = _plotNode.CreateChild().CreateChild();
var plane = baseNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Sphere;
var cameraNode = _scene.CreateChild();
_camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
var imageStream = await new HttpClient().GetStreamAsync("some 512 * 512 jpg image");
var ms = new MemoryStream();
imageStream.CopyTo(ms);
var image = new Image();
var isLoaded = image.Load(new MemoryBuffer(ms));
if (!isLoaded)
{
throw new Exception();
}
var texture = new Texture2D();
//var isTextureLoaded = texture.Load(new MemoryBuffer(ms.ToArray()));
var isTextureLoaded = texture.SetData(image);
if (!isTextureLoaded)
{
throw new Exception();
}
var material = new Material();
material.SetTexture(TextureUnit.Diffuse, texture);
material.SetTechnique(0, CoreAssets.Techniques.Diff, 0, 0);
plane.SetMaterial(material);
try
{
await _plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
}
Please help!
To Create a material from a 2D Texture, you can use Material.FromImage .
Refer following documentation for more detail.
model.SetMaterial(Material.FromImage("earth.jpg"));
https://developer.xamarin.com/api/type/Urho.Material/
https://developer.xamarin.com/api/member/Urho.Material.FromImage/p/System.String/
private async void CreateScene()
{
_scene = new Scene();
_octree = _scene.CreateComponent<Octree>();
_plotNode = _scene.CreateChild();
var baseNode = _plotNode.CreateChild().CreateChild();
var plane = _plotNode.CreateComponent<StaticModel>();
plane.Model = CoreAssets.Models.Sphere;
plane.SetMaterial(Material.FromImage("earth.jpg"));
var cameraNode = _scene.CreateChild();
_camera = cameraNode.CreateComponent<Camera>();
cameraNode.Position = new Vector3(10, 15, 10) / 1.75f;
cameraNode.Rotation = new Quaternion(-0.121f, 0.878f, -0.305f, -0.35f);
Node lightNode = cameraNode.CreateChild();
var light = lightNode.CreateComponent<Light>();
light.LightType = LightType.Point;
light.Range = 100;
light.Brightness = 1.3f;
int size = 3;
baseNode.Scale = new Vector3(size * 1.5f, 1, size * 1.5f);
Renderer.SetViewport(0, new Viewport(_scene, _camera, null));
try
{
await _plotNode.RunActionsAsync(new EaseBackOut(new RotateBy(2f, 0, 360, 0)));
}
catch (OperationCanceledException) { }
}
I'm trying to generate a barcode image. When I use the following code I can create a base64 string but it's giving a blank image. I checked the content is not blank or white space.
There are codes using CoreCompat.System.Drawing but I couldn't make it work because I am working in OS X environment.
Am I doing something wrong?
code:
[HtmlTargetElement("barcode")]
public class BarcodeHelper: TagHelper {
public override void Process(TagHelperContext context, TagHelperOutput output) {
var content = context.AllAttributes["content"].Value.ToString();
var alt = context.AllAttributes["alt"].Value.ToString();
var width = 250;
var height = 250;
var margin = 0;
var barcodeWriter = new ZXing.BarcodeWriterPixelData {
Format = ZXing.BarcodeFormat.CODE_128,
Options = new QrCodeEncodingOptions {
Height = height, Width = width, Margin = margin
}
};
var pixelData = barcodeWriter.Write(content);
using (var image = Image.LoadPixelData<Rgba32>(pixelData.Pixels, width, height))
{
output.TagName = "img";
output.Attributes.Clear();
output.Attributes.Add("width", width);
output.Attributes.Add("height", height);
output.Attributes.Add("alt", alt);
output.Attributes.Add("src", string.Format("data:image/png;base64,{0}", image.ToBase64String(ImageFormats.Png)));
}
}
}
There are some code snippets like below. They can write the content and easily convert the result data to base64 string. But when I call BarcodeWriter it needs a type <TOutput> which I don't know what to send. I am using ZXing.Net 0.16.2.
var writer = BarcodeWriter // BarcodeWriter without <TOutput> is missing. There is BarcodeWriter<TOutput> I can call.
{
Format = BarcodeFormat.CODE_128
}
var result = writer.write("content");
The current version (0.16.2) of the pixel data renderer uses a wrong alpha channel value. The whole barcode is transparent.
Additionally with my version of ImageSharp I had to remove the following part "data:image/png;base64,{0}", because image.ToBase64String includes this already.
Complete modified code:
[HtmlTargetElement("barcode")]
public class BarcodeHelper: TagHelper {
public override void Process(TagHelperContext context, TagHelperOutput output) {
var content = context.AllAttributes["content"].Value.ToString();
var alt = context.AllAttributes["alt"].Value.ToString();
var width = 250;
var height = 250;
var margin = 0;
var barcodeWriter = new ZXing.BarcodeWriterPixelData {
Format = ZXing.BarcodeFormat.CODE_128,
Options = new EncodingOptions {
Height = height, Width = width, Margin = margin
},
Renderer = new PixelDataRenderer {
Foreground = new PixelDataRenderer.Color(unchecked((int)0xFF000000)),
Background = new PixelDataRenderer.Color(unchecked((int)0xFFFFFFFF)),
}
};
var pixelData = barcodeWriter.Write(content);
using (var image = Image.LoadPixelData<Rgba32>(pixelData.Pixels, width, height))
{
output.TagName = "img";
output.Attributes.Clear();
output.Attributes.Add("width", pixelData.Width);
output.Attributes.Add("height", pixelData.Height);
output.Attributes.Add("alt", alt);
output.Attributes.Add("src", string.Format( image.ToBase64String(ImageFormats.Png)));
}
}
}
It's also possible to use the ImageSharp binding package (ZXing.Net.Bindings.ImageSharp).
[HtmlTargetElement("barcode")]
public class BarcodeHelper: TagHelper {
public override void Process(TagHelperContext context, TagHelperOutput output) {
var content = context.AllAttributes["content"].Value.ToString();
var alt = context.AllAttributes["alt"].Value.ToString();
var width = 250;
var height = 250;
var margin = 0;
var barcodeWriter = new ZXing.ImageSharp.BarcodeWriter<Rgba32> {
Format = ZXing.BarcodeFormat.CODE_128,
Options = new EncodingOptions {
Height = height, Width = width, Margin = margin
}
};
using (var image = barcodeWriter.Write(content))
{
output.TagName = "img";
output.Attributes.Clear();
output.Attributes.Add("width", image.Width);
output.Attributes.Add("height", image.Height);
output.Attributes.Add("alt", alt);
output.Attributes.Add("src", string.Format( image.ToBase64String(ImageFormats.Png)));
}
}
}
i have created wall using path in three js. I want change the color option buttion automatically need to change the color onclick event.
Below my color any one help me.
// wall 1 inside
item_count = 1;
var wall_x1 = 69;
var wall_y1 = 55;
var wall_x2 = 366;
var wall_y2 = 52;
var wall_z = 0;
var wall_width = 5;
var wall_height = default_height;
var wall_wall_width = 5;
if(!wall_wall_width) { wall_wall_width = 5; }
var wall_wall_elevation = planner_default_height;
if(!wall_wall_elevation) { wall_wall_elevation = default_height; }
var wall_top_filltype = 'texture';
var wall_top_fill = 'default_wall.jpg';
var wall_side_filltype = 'texture';
var wall_side_fill = 'wall5.jpg';
if ( item_count == 0 )
{
starting_x_value = wall_x1;
starting_y_value = wall_y1;
}
path = generate_path_byline(wall_x1,wall_y1,wall_x2,wall_y2,default_depth);
path_type ="wall";
x=starting_x_value-wall_x1; y=starting_y_value-wall_y1;
// z=default_height/2;
path_transform = transformSVGPath(path);
create_surface(1,1,path_type,path_transform,starting_x_value,starting_y_value,x,y,z,default_height,wall_wall_elevation,wall_top_filltype,wall_top_fill,wall_side_filltype,wall_side_fill);
I see no clear way of defining the material at your sample code, or at least the way three.js does it:
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
If you use as a material a texture with an image, you have many ways to change its color... one easy trick could be to change the light color that lightens the scene or this object.
I have three images all from the same loader on screen. I need to delete a specific (targeted) bitmap once clicked. I have an onClick function below, any help is greatly appreciated. Thanks!
var nb_images:int = 3;
var bmp:Bitmap = new Bitmap;
var img_margin:int = stage.stageHeight/3.5;
var img_request:URLRequest;
var img_loader:Loader;
var images_container:Sprite = new Sprite();
addChild(images_container);
function remove_all_images():void {
for (var i:int = images_container.numChildren - 1; i >= 0; i--) {
images_container.removeChildAt(i);
}
}
function load_images():void {
remove_all_images();
for (var i:int = 0; i < nb_images; i++) {
img_request = new URLRequest('../img/planet' + (int(nb_images * Math.random())) + '.png');
img_loader = new Loader();
img_loader.load(img_request);
img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, on_img_loaded);
}
}
function on_img_loaded(e:Event):void {
e.currentTarget.removeEventListener(Event.COMPLETE, on_img_loaded);
bmp = e.currentTarget.content;
bmp.x = 600, bmp.width = bmp.height = 80;
bmp.y = images_container.numChildren * (bmp.height + img_margin);
images_container.addChild(bmp);
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent):void {
removeChild(e.target);
}
}
load_images();
Okay, first thing I did here was remove var bmp:Bitmap = new Bitmap. You're creating a reference you don't really need, so let's get rid of that altogether.
Now, in your on_img_loaded method, you're going to want to create a new Bitmap for each loaded image.
var bmp:Bitmap = e.currentTarget.content;
Then, you'll need to add the event listener directly to an InteractiveObject rather than the stage. Bitmaps are not InteractiveObjects, so we'll need to wrap it in something else before adding the listener.
var sprite: Sprite = new Sprite();
sprite.addChild(bmp);
addChild(sprite);
sprite.addEventListener(MouseEvent.CLICK, onClick);
Finally, create a method to remove the clicked Bitmap from images_container (note here I removed the nested function - this prevents argument ambiguity and is generally good practice).
function onClick(e:MouseEvent):void
{
images_container.removeChild(e.currentTarget);
}
This is the relevant code in its entirety (untested).
//remove var bmp:Bitmap = new Bitmap from the beginning of the code
function on_img_loaded(e:Event):void {
e.currentTarget.removeEventListener(Event.COMPLETE, on_img_loaded);
var bmp:Bitmap = e.currentTarget.content;
bmp.x = 600, bmp.width = bmp.height = 80;
bmp.y = images_container.numChildren * (bmp.height + img_margin);
var sprite: Sprite = new Sprite();
sprite.addChild(bmp);
addChild(sprite);
images_container.addChild(sprite);
sprite.addEventListener(MouseEvent.CLICK, onClick);
}
function onClick(e:MouseEvent):void
{
e.currentTarget.removeEventListener(MouseEvent.CLICK, onClick)
images_container.removeChild(e.currentTarget as DisplayObject);
}
Hope this helps!
I am typing with very green fingers, so, please excuse the question. Learning from examples, I have been trying to load and display an image in ActionScript. This is from the original example that I am working on:
...
...
var bmd2:BitmapData = bmd.clone();
var infoBM:Bitmap = new Bitmap(bmd2);
var back:MovieClip = new MovieClip();
back.name = "back";
back.rotationX = -90;
var bSurface:MovieClip = new MovieClip();
bSurface.y = int(...
bSurface.z = int(...
bSurface.addChild(infoBM);
var overlay:Sprite = new Sprite();
overlay.graphics.beginFill(...);
overlay.graphics.drawRect(0, 0, bSurface.width, bSurface.height);
overlay.graphics.endFill();
bSurface.addChild(overlay);
back.addChild(bSurface);
var tf:TextField = new TextField();
tf...
tf...
tf...
bSurface.addChild(tf);
...
...
I am trying to place an image onto the bSurface instead of the text block, as above. So far, I've come up with:
var iSprite:Sprite = new Sprite();
var iMatrix:Matrix = new Matrix();
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
function onComplete (event:Event):void
{
bmData = Bitmap(LoaderInfo(event.target).content).bitmapData;
}
iMatrix.tx = 0;
iMatrix.ty = 0;
iSprite.graphics.beginBitmapFill(bmData, iMatrix, false, true);
iSprite.graphics.drawRect(0, 0, surface.width, surface.height);
iSprite.graphics.endFill();
surface.addChild(iSprite);
...and:
var bmData:BitmapData;
bmData = new BitmapData(surface.width, surface.height, true, 123);
var loader:Loader = new Loader();
var location:URLRequest = new URLRequest("c:\pixlr.png");
loader.load(location);
bmData = Bitmap(loader.content).bitmapData;
surface.addChild(bmData);
but to no success. I've been failing miserably for days now, and would greatly appreciate some help.
Thanking you in advance,
Sofia
You're making this more complicated than it needs to be. A Loader is a DisplayObject. So when you want to load an image you can simply do this:
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("c:\pixlr.png"));
addChild(loader);
You can use the onComplete event to handle any sizing or positioning, or fading in you might want to do.