We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
var label = new Konva.Label({
"id": "assetLabel_62c280d6f82f05238c2a8779",
"x": 329.3701840204836,
"y": 78.69399520035239,
"width": 50,
"height": 200,
"draggable": true
});
// It plays the role of background for role. If anything regarding to appearance of the
// label should be changed than Konva.Tag will be place to change.
var tag = new Konva.Tag({
"fill": "#FFFF60",
"stroke": "black",
"strokeWidth": 0.8,
"cornerRadius": 4,
"shadowBlur": 6,
"shadowColor": "blue",
"shadowOpacity": 0.7
});
// Text displayed on the label.
var text = new Konva.Text({
"padding": 5,
"fill": "black",
"align": "left",
"fontFamily": "Open Sans",
"fontSize": "16",
"text": "M:1 | C:0 | T:1\nDeviceType: Mono SFP",
"width": "auto",
"height": "auto"
});
//clubbing labels together #important to club them together before using the label
// to avoid issues regarding to dimension.
label.add(tag).add(text);
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
Please find the code snippet :
self.label = new Konva.Label({
id: ASSET_LABEL + assetData.properties._id,
x: assetData.properties.labelCoordinates.x,
y: assetData.properties.labelCoordinates.y,
draggable: true
});
self.tag = new Konva.Tag({
fill: config.color || Color.DARK_YELLOW,
stroke: Color.BLACK,
strokeWidth: LABEL_STROKE_WIDTH,
cornerRadius: CORNER_RADIUS,
shadowBlur: SHADOW_BLUR,
shadowColor: Color.BLUE,
shadowOpacity: SHADOW_OPACITY
});
self.text = new Konva.Text({
padding: 5,
fill: Color.BLACK,
align: DEFAULT_TEXT_ALIGNMENT,
fontFamily: config.fontFamily || DEFAULT_FONT_FAMILY,
fontSize: config.fontSize || DEFAULT_FONT_SIZE,
text: displayText
});
self.label.add(self.tag).add(self.text);
Related
I would like to use JS classes from a cdn within a react component.
This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges#gh-pages/download/2.1.7/all/gauge.min.js
I have already written the vanillaJS Code, that works well, however I have not idea how
to implement this with react.
The object that is drawn into a canvas is first instantiated with a set of different values,
then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!!
CDN or local file:
<script src="./lib/canvas-gauges.min.js"></script>
html canvas:
<canvas
id="barometer"
</canvas>
instantiating object and drawing it on the canvas:
const barometer = new RadialGauge({
renderTo: canvas,
title: 'hPa',
width: 400,
height: 400,
units: `${location}`,
minValue: 960,
maxValue: 1060,
majorTicks: [
"",
"970",
"980",
"990",
"1000",
"1010",
"1020",
"1030",
"1040",
"1050",
"",
],
minorTicks: 10,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights: [
{
"from": 960,
"to": 1005,
"color": "rgba(0,0,255,0.8)"
},
{
"from": 1005,
"to": 1023,
"color": "rgba(0, 151, 19, 0.3)"
},
{
"from": 1023,
"to": 1060,
"color": "rgba(241, 90, 34, 0.9)"
}
],
valueInt: 1,
valueDec: 0,
colorPlate: "beige",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorNeedleShadowUp: true,
colorNeedleShadowDown: true,
colorNeedle: "#f59042",
colorNeedleEnd: "#f59042",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: false,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 20,
colorBorderOuter: "silver",
colorBorderOuterEnd: "black",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Arial",
fontTitle: "Arial",
fontUnits: "Arial",
fontValue: "Arial",
fontValueStyle: "italic",
fontNumbersSize: 16,
// fontNumbersStyle: "italic",
fontNumbersWeight: "bold",
fontTitleSize: 16,
fontUnitsSize: 16,
fontValueSize: 16,
animatedValue: true,
});
barometer.draw();
Then the values of that object can be accessed simply like this:
barometer.value = 1024;
Now, I would like to do the same thing with react!
There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges";
I can render then:
render() {
<RadialGauge
title= "hPa"
width = "400"... />
}
The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"
I have the following code in a D3 project:
function addSquare() {
//Create SVG element
var SQsvg = d3.select("#square")
.append("svg")
.attr({
"width": 70,
"height": 20,
id: "squaresArea"
})
.on("click", resetRefresh);
SQsvg.append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
function resetRefresh() {
console.log("hello")
//update bar chart when user selects a square
dsPieChart(initialMeasure, pieDataCSV);
TOPbarChartUpdate("N", initialMeasure, "lightgrey",false);
}
}
When I move my cursor to the text Refresh the interactivity does not seem to span the whole word - why is this? and how do I amend the above so that all the text will trigger the event?
A live example of the whole project is here: http://plnkr.co/edit/w9lBwZhoHqQbmNUjihQv?p=preview
I think its due to the container the pie chart is in is ontop of the Refresh button. I have appended the Refresh button to the body, and seemed to solve the problem :
d3.select('body').append('svg').append("text")
.text("Refresh")
.attr({
x: 15, //margin.left,
y: 15,
"font-family": "sans-serif",
"font-size": "14px",
"text-decoration": "underline",
fill: "blue"
})
.on("click", resetRefresh);
http://plnkr.co/edit/rc78OaAZbOVPjPznGKok?p=preview
I'm using this library: https://larsjung.de/jquery-qrcode/ to draw a QR Code inside my canvas, but it doesn't work.
My code:
var a_canvas = document.getElementById("latoSinistro");
var context = a_canvas.getContext("2d");
context.font = "8px appMeFont";
context.textAlign="center";
context.fillText(dati.anagrafica[linguaInUso].prodName, 121, 93);
context.fillText(dati.anagrafica[linguaInUso].pointName, 121, 103);
$("#latoSinistro").qrcode({
"render": 'canvas',
"minVersion": 1,
"maxVersion": 10,
"ecLevel": 'M',
"left": 121,
"top": 130,
"fill": '#000',
"background": null,
"mode": 0,
"size": 100,
"color": "#000000",
"text": "www.app/cod/"+idProdotto
});
make sure you have declare in your view
<div id="latoSinistro"
</div>
make sure your var idProdotto value has been assigned to make qr code generate clearly
I created a custom legend panel for an Ext chart using Ext.draw.Text.... In my application, legends may have long custom texts. So I need to split them using a fixed length. One way would be two split the text using Javascript and create text sprites for each part of text.
Is there any other way to split text in Ext.draw.Text?
Code:
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. Can i split this into two tspan",
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
Thanks In Advance.
I was successfully able to generate multiple tspan for Ext.draw.text by inserting new line characters in text content('\n'). JSFiddle
Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 800,
height: 200,
items: [{
type: 'rect',
fill: 'red',
width: 12,
height: 12,
x: 5,
y: 10
},{
type: "text",
text: "This is a long text.. \n Can i split this into two tspan", //Added new line character
fill: "green",
width: 12,
height: 12,
font: "18px monospace",
x: 25,
y: 15
}]
});
I am having some trouble in adding text from an input box into my canvas, I have successfully added another layer, however my text doesn't seem to add to the canvas and I am baffled as to why not.
I have included a JSfiddle link,
Any help would be greatly appreciated,
Melissa
$("#addbutton").click(function () {
// simple label
var label = new Kinetic.Label({
x: 20,
y: 20,
draggable: true
});
label.add(new Kinetic.Tag({
fill: 'green'
}));
label.add(new Kinetic.Text({
text: $("#newtext").val(),
fontFamily: 'Verdana',
fontSize: 18,
padding: 10,
fill: 'white'
}));
textLayer.add(label);
textLayer.draw();
});