I am using snapsvg.io library and unsure why the following code is not displaying my rectangle with text over my svg line element.
Based on the order I have placed my code, I assumed that my rect/text group would be on top of my line but unfortunately this is not the case and can't figure out what I am doing wrong.
The code sample I have is as follows:
line = s.line(trunkLeftPos, 100, trunkLeftPos, 440);
line.attr({
stroke: error1 ? alert : error2 ? alert : stroke,
strokeWidth: 1
});
var text = s.text(trunkLeftPos + 4, trunkLeftTextPos, 'my text');
text.attr({
fill: error1 ? alert : error2 ? alert : textColorOK,
fontSize: '11px',
'font-weight': '600',
'font-family': 'Arial Narrow, sans-serif',
'text-anchor': 'start',
cursor: error1 ? 'pointer' : error2 ? 'pointer' : 'default',
});
var rect_bg = s.rect(trunkLeftPos + 2, trunkLeftTextPos - 10, 50, 13, 0, 0).attr({fill: "rgb(236, 240, 241)",stroke: "#1f2c39",strokeWidth: 1});
var g0 = s.g(rect_bg,text);
What I have tried to show you here is the order of play where I expected my g0 element to be placed over my line element but from what I can see, the vertical line appears over the top of my g0 element and not below it.
Any ideas?
Just created a codepen example and looks like all worked fine with the sample test within my codepen based on the same display order I have presented above.
Looks like I need to look at my values as indicated by #Sphinxxx
See: http://codepen.io/tonyf/pen/KMzvRe?editors=1010
<svg id="svg" width="400" height="400"></svg>
const s = Snap("#svg");
const line = s.line(0, 0, 40, 200);
line.attr({
stroke: 'green',
strokeWidth: 2
});
const text = s.text(0 + 14, 100, 'my text');
text.attr({
fill: 'red',
fontSize: '11px',
'font-weight': '600',
'font-family': 'Arial Narrow, sans-serif',
'text-anchor': 'start'
});
const rect_bg = s.rect(0 + 10, 90, 50, 13, 0, 0).attr({
fill: "#fff",
stroke: "#1f2c39",
strokeWidth: 0.5
});
const g0 = s.g(rect_bg,text);
Related
I'm just download fabric.js from http://fabricjs.com/build/ with select all and just simple code as below.
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 79, height: 59, left: 190, top: 100, fill: '#f55', strokeWidth: 1, stroke: 'black' });
canvas.add(rect);
There is no rotate and resize control at all and also
canvas.item(0).set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6
})
would not work.
Any suggestion for this case?
The build look like to be broken, you can download fabric.js with npm (https://www.npmjs.com/package/fabric) or download the release from the github page: https://github.com/fabricjs/fabric.js/releases/tag/v4.2.0
I am working off this JSFIDDLE which shows how to add a label to a point in a chart. This works fine for fixing a position for the label in the case of the chart not being responsive. Change the width of the fiddle and the label sits in the original position. I want the label to stay on top of the last column.
I have tried using load and redraw events and I am close, but I need to destroy the label before creating a new one.
events: {
load: function () {
var point = this.series[0].points[2];
this.renderer.label(
'<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
},
redraw: function() {
var point = this.series[0].points[2];
this.renderer.label(
'<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop
)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}
}
I want the label to follow the point when the chart's width is changed.
I tried using a tooltip, but has problems disabling it from the first two columns. I can redraw the tooltip ok, but could not disable it from all other columns
Check out this updated JSFiddle
I added a variable to the global scope var theLabel;
Then on chart initial draw, set theLabel = chart.renderer.label(...)
Then
redraw: function() {
theLabel.destroy();
point = this.series[0].points[2];
theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop)
.css({
color: '#FFFFFF'
})
.attr({fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
}
Note that in redraw::
I call theLabel.destroy() to remove the original label
I changed chart to this
Instead of plotting it at x = 270 I plot it at this.plotWidth - 200 to get it more-or-less on the right hand side of the plot with the chevron always pointing to the red bar.
Hope this works for you
var line = new Kinetic.Line({ points: [415, 115,617,234], stroke: 'gray', tension: 2});
line.addEventListener('click',function(e){
debugger;
// alert(e.x+'.'+ e.y);
// popup;
});
On clicking the line it should be selected.on clicking other place expect line it should be deselected.after selecting the line if i pressed a delete button the line should get destroyed how to do it.
Not exact as your requirement, but you double click on line, line will be removed from layer
here is demo.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [73, 70, 340, 23, 450, 60, 500, 20],
stroke: 'red',
strokeWidth: 15,
lineCap: 'round',
lineJoin: 'round'
});
redLine.on("dblclick",function(){
this.destroy();
layer.draw();
});
layer.add(redLine);
stage.add(layer);
var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
loginText.scaleX(4);
loginText.scaleY(4);
I'am trying to scale a Kinetic.Text object, but nothing happens, I don't know if its possible, I've also tried this:
loginText.fillPatternScale({
x: 4
y: 4
});
but still nothings happens, any ideas?
The answer provided by markE should work.
Here is the complete code and a fiddle example where you can see it work: http://jsfiddle.net/J8vju/
var stage = new Kinetic.Stage({
width: 400,
height: 400,
container: 'container'
});
var layer = new Kinetic.Layer();
var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
var loginText2 = loginText.clone({y: 200});
loginText.scaleX(4);
loginText.scaleY(4);
layer.add(loginText);
layer.add(loginText2);
stage.add(layer);
stage.draw();
You must add the text object to the layer and then layer.draw to redisplay the layer:
var loginText = new Kinetic.Text({
x: 5,
y: 5,
text: 'login: someLogin',
fontSize: 14,
fontFamily: 'Arial',
fill: 'green'
});
loginText.scaleX(4);
loginText.scaleY(4);
layer.add(loginText);
layer.draw();
scaleX should work check out this example here just add this line
simpleText.scaleX(2);
as line number thirty(30) to this example. You will see the scaleX effect on the text working in the example.Make sure you are scaling it before adding line to the layar.Hope that helps.
I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru
I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/
Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.