Is it possible to graphics on a bitmap in easeljs? - javascript

i want to draw a circle on an image in easeljs.
My actual status:
In my canvas 1200 x 800 is a bitmap 9000 x 1000.
The image got a "pressmove" function, so i can navigate from the left to the right of the panorama and from the top to the bottom.
I want to draw a circle/shape onto the image/bitmap.
For example at the coordinate of the image x:3000, y:500.
With my actual attempt to do this i created a container and added the bitmap and the shape in there. If i say bitmap.x/y = shape.x/y, the shape stays where it belongs to be but i need to tie it a specific coordinate.
The picture shows my actual view, the whole picture and the point (x,y) where i want to draw a circle onto the picture. So if i am showing this part of the picture there should be the point.
Do you guys have any idea how to do this?
Problem Solved
As #Lenny said, moving the container instead is moving both of the displayed objects. That's the result i wanted.

Related

How can I replace my cursor with a circle instead of drawing it to canvas in p5.js?

The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush.
Potential solution 1: Replace the cursor using the cursor() function native to p5.
Why it doesn't work: The p5 cursor function only takes the following parameters:
ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image
As such, there's no native way to replace the cursor using the ellipse class.
Potential solution 2: Use the noCursor() function and then draw the circle at the cursor location, while also drawing the background, as such:
var brushSize = 50;
function setup() {
createCanvas(1080,720);
noCursor();
}
function draw() {
background(100);
ellipse(mouseX,mouseY,brushSize);
}
Why it doesn't work: While this solution gets the desired effect i.e. replacing the cursor with a circle the size of the brush, the constantly updating background prevents me from actually drawing to the canvas with the brush when I want to.
Is there some way I can replace the cursor without actually drawing the ellipse to the canvas? Is there any way to save and then instantly reload a canvas in p5? I couldn't find such a method searching through the API docs. Any hints are appreciated.
According to the reference, you can pass a URL into the cursor() function to set an image.
If you want to use an image that you draw, you're going to have to draw them ahead of time and save them to files, and then use those files. Something like this:
cursor('images/ellipse-15.png');
Where ellipse-15.png is an image that you generated ahead of time, to match when brushSize is 15, for example.
Btw P5.js is just setting the cursor CSS property. You can read more about it here.
If you want to go with the noCursor() approach and draw the ellipse yourself, you could draw your drawing to a buffer (the createGraphics() function is your friend) and then draw the ellipse on top of that every frame. I'd still probably use a cross cursor just because there's going to be some annoying lag if you draw it yourself.
Create a circular DIV inside the canvas container and show it on top of the actual canvas.

Three.js How to get the bounding screen coordinate of a Sprite

I have a scene with sprites in it.
As the first step, I tried to get it bounding box by using
var bbox = new THREE.Box3().setFromObject(sprite1);
But it just returns a infinity box.
How do I get the screen coordinate (a and b) of the bounding box of sprite like this?
I am on r87
Edit:
I am not detecting a mouse movement or click. I am just going to put a HTML div right above the sprite. So I want to know its screen coordinate.

How to get image coordinates after centering the object using image.centerObject() in fabric js

I am drawing a rectangle on top of a image and then saving the coordinates of both to a Mysql Database table.
Then I have to retrieve the same image and overlaying Rectangle from a Andriod APP
which will not know anything on FabricJS .
It will only know the coordinates of image and rectangle.
Luckily for image it is not a problem as it can be maintained using some Aspect ratio algorithm.
But how to get the coordinates of Rectangle , so that it can be rendered correctly.
Now what I see is Fabricjs saves the coordinates according to window left ,top, width, height. But andriod app expects the coordinates according to image , which fabricjs doesn't provide.
Any suggestions how to achieve this?
Please let me know if somebody didn't understand .
Its a basic and easy statement , hence not adding any fiddle or code.
before saving to database do this:
image.setCoords();
rect.setCoords();
in
image.oCoords.tl, image.oCoords.tr, image.oCoords.bl, image.oCoords.br
and
rect.oCoords.tl, rect.oCoords.tr, rect.oCoords.bl, rect.oCoords.br
you will find 4 objects with both x and y coordinates that represent your absolute position of the object.
tl stands for Top Left, br stands for Bottom Right and so on.
You should have no problem then to make some subtraction and find relative coordinates of the two objects.
Example:
if image has tl (45,80) and rect has tl (80,110) it means that rect coordinate relative to image is (80-45, 110-80) = (35, 30)

Understanding rotation and calculating the top left point in KineticJS

I am working on a page where I can view images. I want to create a rotation tool. I've done that, but, it's not working consistently. When I set up the centre point to rotate by, the image jumps slightly, and it gets worse each time. I was experimenting, and, I have code to add a wedge to the top left corner of my top level group ( so, at 0,0 ). If I rotate the image by 45 degrees and drag it so that half of it is off the left edge of my canvas, then I call getAbsolutePosition on the wedge and on the group, I get these values:
layer.getAbsolutePosition()
Object {x: 104.66479545850302, y: 279.2748571151325}
wedge.getAbsolutePosition()
Object {x: 180.2684127179338, y: -73.48773356791764}
I think this means my y position is actually the bottom of the image, which is off screen.
What I want to do, is calculate the absolute position of the middle of my image, when the mouse moves over it, regardless of it's rotation. I have some code that works out points with rotation, which seems like it works at first, almost, but it just gets more and more broken the more I use the tool. I feel like there's something about how Kinetic is tracking these things and what it's reporting, that I am missing. Any hints would be most appreciated. Tutorials I can read are even better ( yes, I've read everything linked from the KineticJS site and searched the web ).
In a nutshell, the question is, if I have an image inside a group, and it's rotated, how do I work out the centre point of the image, taking the rotation in to account, and how do I set the offset so it will rotate from that point, and stay in the same place ?
Thanks
As you've discovered about KinetiJS:
rotation is easy
dragging is easy
dragging+rotation is difficult
After you drag your image you must reset its rotation point (offsetX/offsetY).
KineticJS makes dragging+rotation more difficult than it has to be.
Resetting the offset points of your image will cause KineticJS to automatically move your image (Noooo!!).
That's what's causing your jumping.
The solution to the "jumping" problem:
When you reset the image's rotation point (offsetX/OffsetY) you must also reset the image's X/Y position.
This code resets both XY and Offsets for an image after dragging:
A Demo: http://jsfiddle.net/m1erickson/m9Nw7/
// calc new position and offset
var pos=rect.getPosition();
var size=rect.getSize();
var offset=rect.getOffset();
var newX=pos.x-offset.x+size.width/2;
var newY=pos.y-offset.y+size.height/2;
// reset both position and offset
rect.setPosition([newX,newY]);
rect.setOffset(size.width/2,size.height/2);

Possible to Export KineticJS Complete Layer

Does anybody know if there is a way to 'export' an entire KineticJS layer (or group) and not just the part that is in the visible canvas?
I have a simple 'image editor' that allows the user to scale the image in the canvas, the image can deliberately be scaled larger than the visible canvas stage area allowing the user to pan the image sections into view. The problem is that when they come to export the image (currently using the toDataURL) only the section of the image in the visible canvas stage is saved, the rest of the image is discarded!
I effectively want to save the whole layer, not just what is rendered in the visible canvas stage.
Well, You need a temporary workaround.
I assume you have a function or something that does .toDataURL().
Right before you do toDataURL(), change the stage size or scale, then save, then change back.
Example:
function save(){
stage.setScale(newX,newY); //rescale to new values
stage.setWidth(newWidth);
stage.setHeight(newHeight);
stage.toDataURL(); // <----- save
stage.setScale(oldX,oldY); //rescale to old values
stage.setWidth(oldWidth);
stage.setHeight(oldHeight);
}
This will resize or rescale your stage and then put it back the way it was.

Categories