We Keep Coding

Google maps API JAVASCRIPT - Add more rectangles (dynamic)

I have a little problem with my "app" using google maps. I just want to dynamic add a rectangle into my map and each rectangle add a little event...
My code:
google.maps.event.addListener(this.canvas, "click", function(event)
{
var left = event.latLng.lng() - 0.1;
var right = event.latLng.lng() + 0.1;
var top = event.latLng.lat() - 0.1;
var bottom = event.latLng.lat() + 0.1;
var rectangle = new google.maps.Rectangle({
bounds: {north: top, south: bottom, east: right, west: left},
editable: true,
draggable: true,
fillColor: 'blue',
strokeColor: 'blue'
});
rectangle.setMap(map.canvas);
rectangle.addListener("rightclick", function ()
{
if(rectangle.editable)
{
rectangle.setOptions({
editable: false,
draggable: false,
fillColor: "black",
strokeColor: "black"
});
}
else
{
rectangle.setOptions({
editable: true,
draggable: true,
fillColor: "blue",
strokeColor: "blue"
});
}
});
});
All what I want is just add new rectangle after click, and when I use right click -> enable / disable rectangle...
This code works fine, but when I lock one or more rectangles, all rectangles does not move and they are !draggable.
Can you help me with this? Thanks!
live demo : https://jsfiddle.net/3fuf5bqo/ just 2x click on the map (create 2 rectangles) and after this just click (right click) on one of them - both of them does not move

HMMMM, the problem was in "rightclick" event, when I use just "click" or "dbclick" the problem was solved... I do not get it... :-D but it works

Animation in KineticJS

I have a circle added to a layer. In the top of the layer I added a text. I would like to run an animation when the mouse is over the circle, but when the mouse reaches the text the mouseout callback function is called. How can I prevent that?
var circle = new Kinetic.Circle({
x: j * xcenterstep + xshift,
y: i * ycenterstep + yshift,
radius: t_radius,
fill: t_fill,
stroke: t_stroke,
strokeWidth: t_stroke_w,
strokeOpacity: 0.1,
opacity: 0.3 + t_number * 0.05,
});
if (t_number) {
circle.tw;
circle.on("mouseover", function () {
this.tw = new Kinetic.Tween({
node: this,
duration: 0.3,
strokeWidth: 6
});
this.tw.play();
});
circle.on("mouseout", function () {
this.tw.reverse();
});
}
// Adding the text
var radiusText = new Kinetic.Text({
x : circle.getX(),
y : circle.getY(),
text : t_number,
fontSize : radius,
fill : '#fff',
fontStyle: 'bold',
align : 'center'
});
radiusText.setOffset({
x : radiusText.getWidth()/2,
y : radiusText.getHeight()/2
});
bgLayer.add(circle);
bgLayer.add(radiusText);

I think it is better to use mouseenter event. You can disable text's events to prevent mouseout from circle.
radiusText.listening(false)

Reviewing your code, you were missing a } to close the if (t_number) {. I am not sure if it was supposed to encompass the mouseover and mouseout events, but it might have caused your code to respond differently than you are expecting.

Rotates when I scramble Kineticjs

i have scrambled my puzzzle, now i need to have it rotated when i scrmable? can anyone help? Thanks :)
fillPatternImage:imageObj,
x:-pieceWidth*i/2,
y:-pieceHeight*j/2,
stroke: "#000000",
strokeWidth: 4,
lineCap: "round",
draggable: true,
x: i+pieceWidth/4 + (Math.random()*4)*((stage.getWidth()+pieceWidth)/12),
y: j+pieceHeight/4 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/12),
});
JsFiddle : http://jsfiddle.net/vFez6/25/

The general method to rotate a canvas drawing is:
save the context state: context.save()
translate to the desired center of the object: context.translate(centerX,centerY)
rotate by the desired radian angle: context.rotate(Math.PI/4)
draw the object offset by 1/2 width & height: 'context.fillRect(-width/2,-height/2,50,30)'
restore the context state to its unrotated state: 'context.restore()'
Example code and a Demo: http://jsfiddle.net/m1erickson/7aqwjddt/
rotateRectangle(150,150,75,50,45*Math.PI/180);
function rotateRectangle(centerX,centerY,width,height,radianAngle){
ctx.save();
ctx.translate(centerX,centerY);
ctx.rotate(radianAngle);
ctx.fillRect(-width/2,-height/2,width,height);
ctx.restore();
}

nested/concentric group and mouseenter/mouseleave

I've been having some trouble with adding an event listener to a concentric group of circles. My intended functionality is this: when the mouse is over the group, a new black dot (a "Bullseye" -- circle3 in the code below) should appear at the center of the group. When the mouse is not above the group, black dot should not appear.
The following code comes close to accomplishing this:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer({});
var group = new Kinetic.Group({
x: 0, //
y: 0 //
});
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 50,
fill: 'white',
stroke: 'black',
strokeWidth: 4
});
var circle3 = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 20,
fill: 'black',
stroke: 'black',
strokeWidth: 4,
visible: false
});
group.add(circle);
group.add(circle2);
group.add(circle3);
group.on("mouseenter", function(event){
circle3.setVisible(true);
stage.draw();
});
group.on("mouseleave", function(event){
circle3.setVisible(false);
stage.draw();
});
// add the shape to the layer
layer.add(group);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
However, the problem is that "bulleye" flickers as it leaves the outercircle (circle) and enters the inner circle (circle2).
(*) I have tried various solutions -- but nothing seems to be working. For one, I tried to capture the mouseposition (layerX and layerY) and detect a collision with the group region on the canvas. That is, if x and y are within its boundaries, I paint the bullseye. Otherwise, I get rid of it. However, the problem with this solution is that the bullseye is sometimes orphaned in the group even if the mouse has left the group. That is because the mouseout/mouseleave event sometimes has a layerX or layerY position that is still within the circle.
(*) Using mouseover and mouseout instead of mouseenter/mouseleave doesn't seem to affect anything.
(*) I can't add the eventlistener to the outer circle alone, since that makes the bullseye disappear when the mouse is over the innercircle.

You can prevent the flickering by turning off event listening for the nested circles, like so:
group.add(circle);
group.add(circle2);
group.add(circle3);
// Don't listen for any events (e.g. mouseenter/leave) on the inner circles
circle2.setListening(false);
circle3.setListening(false);
It fixes the issue you describe, but I'm not sure if you need to listen for other events on those circles... If so, you may need to cancel propagation of events from the inner circles.

Someone can provide some code example for Raphael JS events?

I don't know how to use Raphael JS events.
I need some example. I see the documentation and a function must be passed, but is not working.
Someone can provide some example of how to get the mouse position of a click in the canvas?
EDIT: I see in documentation events for Element. This will work for Paper? How I create a mousedown() event for Paper?

clickEvent = function(){
alert("Hello World!");
}
paper = Raphael(...);
paper.raphael.click(clickEvent);

p.mouseover(function () {
p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
txt.stop().animate({opacity: 1}, ms, "elastic");
}).mouseout(function () {
p.stop().animate({transform: ""}, ms, "elastic");
txt.stop().animate({opacity: 0}, ms);
});
check out the source code in the Raphael examples.
Here's another example with a click event:
movers[2].click(function () {
this.cx = this.cx || 300;
this.animate({cx: this.cx, "stroke-width": this.cx / 100, fill: this.cx - 100 ? "hsb(.2, .75, .75)" : "#000", "fill-opacity": +!!(this.cx - 100)}, 1000, "<");
this.cx = this.cx == 300 ? 100 : 300;
});
which is taken from the easing example.
I don't know if the code will work on version 2, though