Working with javascript and the Easeljs lib and createjs, i need some help.
my program draws some circles and fills them with color. also with a Ticker they are moving and with some if statements they are bouncing from the walls of the window.
The circles are created dynamicly and the amount of circles is different everytime.
Now I need to implement a feature so that the circles will enlarge when you press them. They should get their radius +1px bigger every 30 ms. I don't know how to do that.
1. Do u use onPress for this?which callbacks do i need to use and how will i find out if the mouse is released and the circle can stop growing?
2. do i need to delete circleObject from my circlesArray or is it enough to delete it from the stage and draw them again?
I'm desperate for help, i would be glad if someone could give me some clues!
Greetings T
With the information you provided I would refer you to take a look at this EaselJS Example on github: https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop_hitArea.html
The onPress-Method is used there in a way that you could probably almost copy as is.
Yours could look like this:
function(target){
target.onPress = function(evt) {
target.grow = true; //or a grow-factor or so
evt.onMouseUp = function(ev) {
target.grow = false;
}
}
}(circle);
and in your tick-function you look through all circles, check for their grow==true and increase their radius if so
And 2:
Your circleObjects all are a createjs.Shape right? You don't have to delete them from the stage or from the array, you can use circle.graphics.clear(); and then redraw the circle with the new radius.
Related
I would like to create an element, that shows a red circle. Once the user clicks on it, she can record her voice. In order to show the LIVE mode, I'd like to make the circle "breath" according to the incoming frequencies.
I'm experimenting with a <canvas> element. That means it creates a circle that gets bigger and smaller, depending on the variable arcrad. However, the lines are being drawn correctly, but they do not disappear afterwards. I tried to apply .clip() but can't get it to work...
if (arcrad <= 10) arcrad = 10;
analyserContext.beginPath();
analyserContext.arc(100,120,arcrad,0,2*Math.PI);
analyserContext.closePath();
analyserContext.lineWidth = 2;
analyserContext.strokeStyle = 'red';
analyserContext.stroke();
Any ideas - or completely different strategies for this use case?
Canvas will overdraw by default. For your animation you’ll need to clean the canvas at the start of each frame. Use something the following at the start of your drawing function:
analyserContext.clearRect(0,0,200,200);
assuming your canvas is 200 pixels wide and high. It’s worth pointing out that sometimes you don’t want to completely clear the animation field every frame. For example, if you were to draw a semi transparent rectangle over the frame at the beginning (instead of clearing it) then you’d end up with a basic ‘bullet time’ style effect.
It's a normal behavior. Once something it's drawn on the canvas, it's there forever. You have to think like if you were painting something: what has been done cannot be undone.
Luckily, you still have solutions:
1) redraw another circle on top of the first one with the background color. It's really not the recommend way, but it still can be useful
2) use clearRect method (see How to clear the canvas for redrawing)
There are numerous ways to clear a canvas pre drawing to create animation:
How to clear the canvas for redrawing
simplest in my mind:
canvas.width=canvas.width;
though can equally use clearRect (which is actually quicker and won't reset the entire canvas if that is an issue regarding transforms etc!) over the region or whole canvas.
Get the likes of:
http://jsfiddle.net/dw17jxee/
This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.
I have this map:
As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.
But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.
I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.
I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.
I hope that one of you have a suggestion that I've overlooked.
Give a try to these -
http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS
You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.
Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
Make an image for each clickeable zone, like this:
Register to the click event of the img element from the page, this way:
var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};
$(".post-text img").click(function(e) {
var area = getAreaFromXY(e.offsetX, e.offsetY);
});
I have a working animation that uses only EaselJS to load and display images. The whole animation works quite well, but images appear and disappear immediately. I would like them to fade in and out over time. Here's a small jsfiddle that might illustrate the problem better: http://jsfiddle.net/tNLyx/
var stage = new createjs.Stage("canvas");
var shape = new createjs.Shape(new createjs.Graphics().f("#f00").dc(0,0,100)).set({x:100,y:100});
stage.addChild(shape);
stage.update();
shape.addEventListener("click", function(){
//Shape will now disappear quickly. I would like it to fade out, by tweening its alpha or opacity or something. Any help would be greatly appreciated!
stage.removeChild(shape);
stage.update();
});
When you click the red circle, it simply disappears, immediately. I would like it to fade out slowly. I have done some research but am having trouble finding good documentation - it appears that what I need is the TweenJS "sister" library, and at least some of the following code:
createjs.Ticker.setFPS(30); //Sets frames-per-second for TweenJS
createjs.Tween.get(shape).to({alpha: 0},1000);
I believe the last line is supposed to get the "shape" object which I made previously, then set up an animation which animates its alpha property (which I assume is 1 by default when added to the stage, but I'm not sure), and reduces it to this 0 over 1000 milliseconds. The code doesn't actually do anything - any help would be much appreciated!
You need to ensure you update the stage during a tween, or whenever a property changes.
Here is a quick fiddle using your code. I added a tick listener to the stage, which will redraw the stage constantly. http://jsfiddle.net/lannymcnie/FVw7E
createjs.Ticker.addEventListener("tick", stage);
Note that you may want to control when the tick is added and removed, so it isn't unnecessarily redrawing the stage when nothing is changing. A quick way would be to add a call to the end of the tween.
createjs.Tween.get(shape).to({alpha: 0},1000).call(doneAnimating);
function doneAnimating() {
createjs.Ticker.removeEventListener("tick", stage);
}
Cheers.
I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.
This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},
Please see the code below. I am trying to draw a circle around a path (an icon made by Raphael.js founder, Dimitry) and then fill the circle with a color. This, however, paints on the top of the path. If I could first draw the filled circle and then draw the path, this would be solved. But I need to reference the path because I need to find its center, in order to draw the circle. Can anyone please suggest how to do this? My code is below.
Thanks.
<script>
var myVar = {
s: 1,
pw: 850,
ph: 450
}
</script>
<script>
var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);
var market = paper.path(paths.marketBoundary);
market.attr({fill: "rgb(75,245,75)", stroke: "None"});
var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")
humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
humanIcon.translate(40,40);
var bbox = humanIcon.getBBox();
var xcenter = Math.round(bbox.x + bbox.width/2.0);
var ycenter = Math.round(bbox.y + bbox.height/2.0);
var circle = paper.circle(xcenter, ycenter, 40);
circle.attr({fill:"white"});
</script>
After doing a lot of search on Google, I found the answer here on Stackoverflow. At the time, I did not save the link to the answer and I don't remember it. If anyone does find it, please edit this answer and post it. However, I did record the solution and here it is:
One can use the insertBefore() and insertAfter() functions in Raphael. In the example code given in the question, one can do this by changing the last line to:
circle.attr({fill:"white"}).insertBefore(humanIcon);
Thanks to those who responded.
Try changing the order in which the two are drawn. That or look over the Raphael docs to see if there is a "Z-index" attribute that can be used to permanently modify the position of the path on the stack of render-able layers.
Edit: I didn't read your explanation well enough. If you could declare your object without drawing it perhaps you could grab the BBox, and then draw it later.
Edit, Edit: SVG has a "defs" tag to create objects without drawing them, so it stands to reason that Raphael can handle it too.
Try using Raphael's Element.toBack() and Element.toFront().
In your case, it sounds like you want to draw the path, then draw the circle, then call either circle.toBack() or path.toFront().