How do you change the sprite position in a animation? KineticJs - javascript

I the speech bubbles to be next to the person who says them but how do I change the position? I don't want to have any more animations for that, is it possible?
link: http://www.tlu.ee/~kristo93/Eritamine%20-%20puhas/p6hi.html
for example the next tere would be positioned next to the students.

There is always an X-Y co-ordinate of any group or element you create using the kinetic.js
You just need to manipulate X-Y property of the group containing your speech cloud.
suppose your reference to that cloud group is called cloudGroup then set the X and Y property using the method as follows:
cloudGroup.setX(100);
cloudGroup.setY(100);
So just insert anything instead of 100, which suits the position you desire.

Related

Create SVG elements from collection without explicitly setting coordinates

I'm new to SVG, so I don't know if I'm missing something obvious and simple.
In every lesson on creating SVG elements, x and y coordinates must be explicitly set for element to be drawn. But is there a way for a browser to draw one svg shape right next to another, without explicitly specifying coordinates, like DOM does when you write <div>content1</div><div>content2</div>?
What I want is:
Having a collection of data for elements (let's say, they are all rectangles with only width and height specified), is there a way to draw all of them sequentially in a row (horizontally)? I don't want to manually set coordinates for each element, just call foreach element in array and expect browser to figure out coordinates from each element's width property.
Is this achievable only with some script that dynamically calculates bounding box for each element or there is some simpler way?

How to make HTML Canvas clickable grid (that returns cell to match array element?)

Trying to build the Game of Life here with React JS. I have a 2-dimensional array that holds the state of the grid. Every element, which is an array, represents a row and a sub-element is either 0 or 1 (dead or alive).
I want to use HTML Canvas to draw the grid based on this array and also add a click function that returns the matching element in the array so I can write a function to change it to 0 or 1 based on an algorithm.
I have a general idea how to draw a grid, also checked this link
But i am not sure whether this is the way to do it so I can identify each cell with a click. And also stuck on how I can return the cell to match the array element. Anyone can help me with this?
I am also aware of this question on Stack Overflow, but the answers are implementations with HTML or SVG, I am looking for a canvas implementation.
First of all you have to handle the click event. Here you can find a good description of how: How do I add a simple onClick event handler to a canvas element?.
Furthermore, you just use the x and y of the clicked point to determine what tile has been clicked. Lets say you have 10 x 10 tiles with the height and width of 10 px.
If the user clicks the coordnate 67,12 you can divide x and y by ten, and round it off to know which elelemt in your 2d array that represents it.

How to select circle in Agar.io?

I'm creating an user-script for Agar.io but i have to select the circle of the player (the circle with the nick). Is possible selecting the circle with document.querySelector()?
The circle you control is not a DOM element. It is drawn on the canvas with id="canvas".
This means you can't use document.querySelector() to select the player. You'd need to find the actual JS variable name associated with the player object if you want to modify its properties.

Raphael JS move/rotate group of drawings as one?

I have a little tool that draws up a grid of circles(representing holes) that allows the user to add text and lines to these circles. Right now I have it set up so if the user clicks on any of the holes then wherever the hole is moved so is every other element on the Paper object. What I am trying to implement next is the ability to rotate everything as one object. I realize that for this to work that I need to know the central point of all the objects, which I can easily get.
What I want to know is should I draw everything on another object. This object will act as another Paper object of sorts, but will only serve for movement and rotation. Any click events on the holes drawn on the object will be passed on to the parent (i.e. the pseudo-paper object everything is drawn on). Is this possible? If so how would I draw everything onto say, a rectangle? And if not what would be the best way to go implementing it?
What you need is a Set. You create it, push objects to it, and then treat it as an entire group, in your case by applying transformations.
Example:
var elements = paper.set();
if (!view.text) {
view.text = App.R.text(0, 0, this.value);
view.text.attr({
'font-size': font_size,
});
elements.push(view.text);
}
elements.transform('something');
Note that you can also bind events to this entire set.

Get Line co-ordinates in Javascript

I am drawing lines using Canvas (HTML 5), since lines/shapes are not stored as objects in Canvas, I cannot attach unique events to it (eg onmouseclick)
I wish to attach a onmouseover event to a line, is it possible by getting to know if the mouse if over a particular line (using its 2 X and 2 Y co-ordinates) in Canvas using Javascript. Would this work for different line widths (eg: 2,5 pixels)
Want to avoid using SVG as the entire project is built on Canvas
Please advise.
You would need to use math formulas to calculate the area of the line and whether a certain point intersects with it.
Here's a basic example:
Find mouse coordinates relative to position of the canvas (How to find mouse pos on element)
Calculate whether mouse x/y is inside some rectangle (Point in rectangle formula)
Done.
There is a function isPointInPath(x,y). It will return true if a point is on the current path.
You will have to call that for every line you want to check and the best way to do that is at the same time as you draw.
The best way is using some canvas frameworks. Look at "LibCanvas :: Creating Lines" (dont forget to dblClick at canvas)

Categories