I have to multiple images merged as one sprite image. These images are not part of some animation, it's just different static images.
I need to load them somehow in Createjs/EaselJS but I don't know the template of json for spritesheet data.
All search results points to how to make sprite animation, but I don't need animation, just static images by id.
Can anyone provide an example how to achieve this?
Here is an example for your json file:
{
"frames": [
[0, 0, 120, 200],
[140, 0, 350, 400]]
}
Every item in 'frames' describe one frame in your spite image. There are 4 values per each frame. First 2 stand for frame's position in the sprite. [0, 0] left-upper corner for frame #1 and [140, 0] for frame #2. Other 2 value describe frame size (120x200 and 350x400 in my case).
Load this json and your image into EaselJS and then instantiate as a Sprite. Like this:
var ssheet = new createjs.SpriteSheet(ss);
var sprite = new createjs.Sprite(ssheet);
Don't use play method as it's not animation in your case. Just call gotoAndStop(0) for the first frame and gotoAndStop(1) for the second frame.
Now add your sprite to the stage.
Related
In Lightroom, I can resize images to a pixel value for the long side. That way if, for example, an image is five times as tall as it is wide, and I asked for a 2,000px (long side) image, the result will be 2000x400px. Not 10,000x2,000px.
In other words, the aspect ratio is maintained, and 2,000px is a limiter.
Can sharp do this, and maintain the aspect ratio -- when I don't know in advance whether the height or the width will be greater?
Otherwise I will have to pull the exif data from the images so that I know in advance which is greater, and can resize based on the greater side (width or height). I am trying to avoid this step.
Below is my current code and it creates 300x300 images, ignoring the aspect ratio. However the desired result is:
300x200 images, when given images whose aspect ratio is 3:2
200x300 images, when given images whose aspect ratio is 2:3.
etc.
exports.resizeResolutions = {
mapThumbnail: {x: 300, y: 300},
}
exports.fitMethods = {
inside: "inside",
}
proc = sharp(path.join(pathToLocalFSGalleries, folder, file),
{ fit: fitMethods.inside }).resize(resizeResolutions.mapThumbnail.x, resizeResolutions.mapThumbnail.y);
await proc.toFile(path.join(pathToThumbnails, folder, file));
I'm converting a JavaScript library to Haxe. In this library, there is an animated effect constructed with many of shapes. So I used the OpenFL library to render shapes.
But now I have a technical problem with transformation.
Some of the shapes has the child shapes so it's transform should be applied to the child shapes too.
For example, please imagine shapeC is attached on shapeB and, shapeB and shapeD are also attached on shapeA. In this case, shapeB, shapeD should be transformed by both of transformA and their own transform and, shapeC also should by transformA, transformB and transformC.
To achieve this, is it a good solution to render the same level shapes in one graphic and apply the parent's transform to that graphic? (on above example, render shapeB and shapeD to one graphic and a apply transformA to that graphic)
I think it's not a good optimized solution to calculate the final transform from all parents transforms and apply that to all vertexes of that shape. Please tech me the best optimized solution for rendering.
Any suggestion will be welcome.
And if there is any confused things on this question, please pardon me and let me check.
You can use the Sprite class:
var parentShape = new Sprite ();
parentShape.graphics.beginFill (0xFF0000);
parentShape.graphics.drawRect (0, 0, 100, 100);
var childShape = new Sprite ();
childShape.graphics.beginFill (0x00FF00);
childShape.graphics.drawCircle (0, 0, 50);
childShape.x = 200;
childShape.y = 200;
parentShape.addChild (childShape);
addChild (parentShape);
Each shape will use its own canvas element, so if you create a lot of shapes, you may decide to flatten it into a single image when you are ready. This is possible using cacheAsBitmap or bitmapData.draw
parentShape.cacheAsBitmap = true;
...or
removeChild (parentShape);
var bitmapData = new BitmapData (Math.ceil (parentShape.width), Math.ceil (parentShape.height), true, 0);
bitmapData.draw (parentShape);
var bitmap = new Bitmap (bitmapData);
addChild (bitmap);
I am new to using KineticJS and am using it to develop a simple 2D game which involves sprites, collision detection etc.
I need to access various properties of my sprite object (let's call it spriteObj here).
I can get to the sprite coordinates using spriteObj.getX() and spriteObj.getY() and this works perfectly.
Now I need to also retrieve the other properties of the sprite, such as height and width, but there does not seem to be a way to do it. Specifically if I have an animation within my sprite, how can I retrieve the current frame and/or the x, y, height, width of that animation frame.
What I really need is something like spriteObj.getWidth() and spriteObj.getHeight() but these do not exist. Any suggestions please? I can see nothing on the html5 tutorials page for this (see here)
Thanks,
Owen
The methods you are looking for do exist, check the KineticJS Sprite API
Here is the KineticJS Sprite Tutorial
Here are the functions you asked for:
Sprite.getX()
Sprite.getY()
Sprite.getWidth()
Sprite.getHeight()
Sprite.getIndex()
Based off of that tutorial I added some code to fit your needs, check the console.log to see the methods in action. For the width and height, although it is not necessary, you have to specify a width and height property on your spriteObj or else it will just return 0.
var blob = new Kinetic.Sprite({
x: 250,
y: 40,
image: imageObj,
animation: 'idle',
animations: animations,
frameRate: 7,
index: 0,
width: 80,
height: 100
});
And a new button to test the getIndex() function:
// stop animation
document.getElementById('stop').addEventListener('click', function () {
alert(blob.getIndex());
}, false);
jsfiddle
I want to run vtkMarchingCubes on a nifti label set. Regions of voxels, for which I want to produce surfaces all share the same value. I have two problems. First, I seem to be setting up the algorithm incorrectly because the resulting vtkPolyData apparently has no vertices. Secondly, it is not clear to me from the vtkOBJExporter documentation how to export the vtkPolyData as a wavefront .OBJ file. If anyone sees any issues with the code below or can tell me how to export the vtkPolyData as an OBJ, I would be grateful.
//Read The Nifti Label File
string input_path = "/MyPath/labels.nii";
nifti_image *im = nifti_image_read(input_path.c_str(),true);
cout<<im->nx<<","<<im->ny<<","<<im->nz<<endl; //Confirms Read Works
// Set up vtk image data
vtkImageImport* importer = vtkImageImport::New();
importer->SetImportVoidPointer((void*)im->data);
importer->SetDataScalarTypeToFloat();
importer->SetDataExtent(0, im->nx-1, 0, im->ny-1, 0, im->nz-1);
importer->SetWholeExtent(0, im->nx-1, 0, im->ny-1, 0, im->nz-1);
vtkImageData* point_cloud = importer->GetOutput();
point_cloud->SetScalarTypeToFloat();
point_cloud->SetExtent(0, im->nx-1, 0, im->ny-1, 0, im->nz-1);
point_cloud->SetSpacing(im->dx, im->dy, im->dz);
//Apply Threshold To Cut Out Other Data
//Is this needed or will Marching Cubes properly identify the region
vtkImageThreshold* threshold = vtkImageThreshold::New();
threshold->ThresholdBetween(label_number,label_number);
threshold->SetInValue(255);
threshold->SetOutValue(0);
threshold->SetInput(point_cloud);
//Apply the Marching Cubes algorithm
vtkMarchingCubes* marching_cubes = vtkMarchingCubes::New();
marching_cubes->SetValue(0, 127.0f);
marching_cubes->SetInput(threshold->GetOutput()); //(vtkDataObject*)point_cloud);
vtkPolyData* surface = marching_cubes->GetOutput();
marching_cubes->Update();
//See That Marching Cubes Worked
cout<<"# Vertices: "<< surface->GetNumberOfVerts()<<endl;
cout<<"# Cells: "<< surface->GetNumberOfCells()<<endl;
//Export (How is this done properly?)
vtkOBJExporter* exporter = vtkOBJExporter::New();
exporter->SetInput(vtkRenderWindow *renWin); //I don't want a render window, I want at file
exporter->SetFilePrefix("/MyPath/surface");
exporter->Write();
You can use this class https://github.com/daviddoria/vtkOBJWriter to write the obj file in the way you would expect (like every other VTK writer). Unfortunately the vtkOBJExporter wants to also write additional information that I never have.
I'm having an hard time finding how to draw/print a String in a canvas, rotated 90º, NOT vertical letters. After some different approaches without success I was trying to follow one that would involve printing the Graphics object to an Image object. As the API is reduced it has been a difficult task.
So basically what I'm asking you guys is if you know how to draw a String rotated 90º in a Canvas or if you don't, how can I save the graphics object to an Image one so I can follow my "hint".
Thank you very much!
Guilherme
Finally, one last research in the web and here it is:
//The text that will be displayed
String s="java";
//Create the blank image, specifying its size
Image img=Image.createImage(50,50);
//Create an instance of the image's Graphics class and draw the string to it
Graphics gr=img.getGraphics();
gr.drawString(s, 0, 0, Graphics.TOP|Graphics.LEFT);
//Display the image, specifying the rotation value. For example, 90 degrees
g.drawRegion(img, 0, 0, 50, 50, Sprite.TRANS_ROT90, 0, 0, Graphics.TOP|Graphics.LEFT);
from: http://wiki.forum.nokia.com/index.php/How_to_display_rotated_text_in_Java_ME
Thank you!