I wanna be able to click on var textradie text "Show radie" and then add two circles kinGroups[index].add(circle); and kinGroups[index].add(circlered);. Im adding the two circles on my Group kinGroups[index].
All my jsonObjects[i].radie == false, so I dont know why only one object in kinGroups[index] have two circles. All my three objects should have two circles, but only one object have two circles.
var textradius = new Kinetic.Text({
x: 1000,
y: 500,
fontFamily: 'Calibri',
fontSize: 18,
text: 'Show radius',
fill: 'black'
});
kinGroups[index].add(textradie);
textradius.on('click', function() {
for(i=0; i<jsonObjects.length; i++) {
console.log("testing");
if(kinGroups[index].getName() == jsonObjects[i].name) {
if(jsonObjects[i].radie == false) {
kinGroups[index].add(circle);
kinGroups[index].add(circlered);
}
}
}
});
You have to add new circle and circlered objects to the groups.
You could use the clone() method to do this:
kinGroups[index].add(circle.clone());
kinGroups[index].add(circlered.clone());
[ Addition: example code ]
Demo: http://jsfiddle.net/m1erickson/4uAdc/
Assume you have:
A group,
A text element in that group. The text element is named "One".
Other elements in that group. Some of the other elements are named "One".
If you click on the text named "One", here's how to draw a double-circle around the other elements that are also named "One".
// define a circle that can be cloned
var circle=new Kinetic.Circle({
stroke: 'black',
strokeWidth: 2,
});
// get all children with the same name as the clicked text
var children=group.find("."+text.getName());
// iterate those children and add cloned circles
for(var i=0;i<children.length;i++){
// get the x,y of the other elements with the same name as the text
var child=children[i];
var x=child.getX();
var y=child.getY();
// add cloned circles around those other elements
var red =circle.clone({x:x,y:y,radius:10,stroke:"red"});
var blue=circle.clone({x:x,y:y,radius:15,stroke:"blue"});
text.group.add(red);
text.group.add(blue);
}
layer.draw();
Related
I'm trying to get an SVG Snap element by it's id. First I create a canvas:
var s = Snap("#svgout"), //creates the canvas
Then I cerate a group:
var rect = s.rect(posx, posy, 40, 40, 6).attr({
fill: "none",
stroke: "#F44336",
strokeWidth: 3,
});
var group = s.group(rect).attr({
cursor: "move",
});
and next I get the id of the group that is defaulted by SVG Snap
var currGroupId = group.id;
Now, when I try to reference my group later in my code and get it by it's id,
s.select(currGroupId);
I get null. How do I properly select an element by it's id?
select will use a cssSelector, as in container.queryAll.
So I don't think Snap sets an id as an svg attribute (do correct me if I'm wrong). Which means if you want to use select, you may have to manually set it.
Also I susect s.select(id) wouldn't work, I think it would have to be s.select('#'.id) but I may be wrong. If you can get a fiddle up, it will be easier to test.
SnapSVG doesn't automatically set the ID attribute of the group. Instead it adds a field to the object itself. One way of getting around this limitation is to do the following.
var s = Snap("#svgout");
var rect = s.rect(posx, posy, 40, 40, 6).attr({
fill: "none",
stroke: "#F44336",
strokeWidth: 3,
});
var group = s.group(rect).attr({
cursor: "move",
});
Explicitly set the ID.
group.attr({
id: group.id
});
var currGroupId = group.id;
select uses CSS selectors. So we must add a '#' to the start of the ID.
s.select("#" + currGroupId);
Note: This method has been tested by me using SnapSVG V0.4.1
If this does not work and you are using jQuery. try:
$("#"+currGroupId);
I have kendo-chart at my js code.
By default, the legend area layout is that, there is list of colors, and the right of every color - there is label with series name. I want to reverse the order: put label first, and color second, and align it to right.
I think the best way to do it is by legend.item, but I don't know how to do it.
see the current state:
and here is demo of what I want will be:
You can create a custom legend visual using the Kendo legend methods.
legend: {
item: {
visual: function (e) {
// get the default color for the legend shape
var color = e.options.markers.background;
// get the default color for the legend text
var labelColor = e.options.labels.color;
// bounds of the legend
var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
var layout = new kendo.drawing.Layout(rect, {
spacing: 5,
alignItems: "center"
});
// Recreate the legend shape (can be any shape)
var marker = new kendo.drawing.Path({
fill: {
color: color
}
}).moveTo(10, 0).lineTo(15, 10).lineTo(5, 10).close();
// recreate the label text
var label = new kendo.drawing.Text(e.series.name, [0, 0], {
fill: {
color: labelColor
}
});
// This is the key part: it draws the label first then the shape
layout.append(label, marker);
layout.reflow()
return layout;
}
}
The important part of this code is this part:
layout.append(label, marker);
Because we're specifying the label first, then the marker, the label should appear first.
I don't have a jsFiddle setup for this, but Kendo has an example in their dojo: http://dojo.telerik.com/OdiNi
In this case you'll have hide the legend.
legend: {
visible: false
},
And create your own legend in html.
I am trying to create group object that include text,image .
I want to get right position(x,y) when dragging the group object.
Now i get minus value {x:-26,y:-18} like that.
var text2=new Kinetic.Text({
x: 40,
y: 125,
text: 'Time:4:20',
fontFamily: 'Calibri',
fontSize: 12,
padding: 5,
fill: 'red',
draggable: false
});
var group = new Kinetic.Group({
width:94,
height:45,
draggable: true
});
group.on('dragend', function() {
alert("X:"+group.getAbsolutePosition().x+"Y:"+group.getAbsolutePosition().y);
});
group.add(text2);
layer.add(group);
stage.add(layer);
Your code is working normally.
You have a non-draggable text on the draggable group.
This causes the text to act as a "handle" to drag whole group.
(the text does not move relative to the group. Instead the whole group is moved by dragging the text).
So if you drag the text up and left a bit the group will be pulled up and left a bit.
Therefore the group reports negative coordinates.
I want to make temporary group and add nodes to it, so that they become draggable (because group is).
Then i want to remove those nodes from that group and add other nodes to that group, make them movable and others unmovable.
Group is movableGroup:
var movableGroup= new Kinetic.Group({
draggable: true,
});
I want to add shapes to it.
I want to add new shapes to it and remove shapes that was added before these.
To remove all child nodes of a group:
moveableGroup.removeChildren();
Then you can add some new nodes to the group:
var box = new Kinetic.Rect({
x: 0,
y: 0,
width: width,
height: height,
stroke : 'black',
strokeWidth: 1
});
moveableGroup.add(box);
I am trying to create a button with text inside using the Raphael JavaScript library. I would like to have a glow around the button on mouseover. I achieved this by using the set on rectangle and text and applying the glow on the set. I tried two approaches binding the mouseover and mouseout methods to the resulting button set. In the first case the glow stays if the cursor reaches the text, in the second one the glow disappears. Here is the code :
// canvas
var paper = Raphael(0, 0, "100%", "100%");
// background of the first button
var bBox1 = paper.rect(100, 100, 120, 50, 10).attr({
fill: 'darkorange',
stroke: '#3b4449',
'stroke-width': 2
});
// text of the first button
var text1 = paper.text(bBox1.attrs.x + bBox1.attrs.width / 2, bBox1.attrs.y + bBox1.attrs.height / 2, 'Click to expand').attr({
"font-family": "Helvetica",
"font-size": 16
});
// set of rectangle + text = button
var button1 = paper.set().attr({
cursor: 'pointer'
});
button1.push(bBox1);
button1.push(text1);
button1.mouseover(function (event) {
this.oGlow = bBox1.glow({
opacity: 0.85,
color: 'gray',
width: 15
});
}).mouseout(function (event) {
this.oGlow.remove();
});
// ********** now the second button **********
// background of the second button
var bBox2 = paper.rect(100, 200, 120, 50, 10).attr({
fill: 'lightblue',
stroke: '#3b4449',
'stroke-width': 2
});
// text of the first button
var text2 = paper.text(bBox2.attrs.x + bBox2.attrs.width / 2, bBox2.attrs.y + bBox2.attrs.height / 2, 'Click to expand').attr({
"font-family": "Helvetica",
"font-size": 16
});
// set of rectangle + text = button
var button2 = paper.set().attr({
cursor: 'pointer'
});
button2.push(bBox2);
button2.push(text2);
// function for the mousover event for buttons
var buttonMouseoverHandler = function (event) {
this.oGlow = this.glow({
opacity: 0.85,
color: 'gray',
width: 15
});
}
// function for the mouseout event
var buttonMouseoutHandler = function (event) {
this.oGlow.remove();
}
button2.mouseover(buttonMouseoverHandler);
button2.mouseout(buttonMouseoutHandler);
Here is a working jsfiddle example : http://jsfiddle.net/fkNhT/
I absolutely do not understand the difference in the behavior, can anyone please give me a hint?
Simple: In the first mouseover, you're setting the glow on the rect object, regardless of what's being moused over:
this.oGlow = bBox1.glow({...
In the second, you're setting it to "this", which would apply to the text object when you mouse over it:
this.oGlow = this.glow({...
How to prevent the loss of hover on interior elements of an element is one of the most common Raphael-related questions on SO. See this for a simple solution for small projects, and this open thread for an alternative for bigger projects.