I'm currently looking into KonvaJS to create like a scrap booking app, and i'm trying to display like a bullet list.
I trying to use a Text shape and add html to the text to see if it will render it, but no luck.
Is this even possible? If so, how? If not, what other ways does KonvaJS have to display fancy text, like lists, bold ext...
var text = new Konva.Text({
text: '<div>this is normal text\n\n <b>This is BOLD</b> </div>',
fontSize: 8,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
padding: 20,
align: 'center',
stroke: 'black',
strokeEnabled: false,
strokeWidth: 0
});
Output:
Sorry, I don`t have enough reputation to post images, but the output text is:
<div>this is normal text
<b>This is BOLD</b> </div>
I want it to be something like:
this is normal text
This is BOLD
Any help appreciated, thanks!
Actually you can load many icons from font-awesome, and make beautiful web apps:
window.onload = function () {
var stage = new Konva.Stage({
container: 'container',
width: 1000,
height: 1000
});
var layer = new Konva.Layer();
var simpleText = new Konva.Text({
x: stage.getWidth() / 10,
y: 15,
text: "\uf21c",
fontSize: 300,
fontFamily: 'FontAwesome',
fill: 'green'
});
layer.add(simpleText);
stage.add(layer);
}
#font-face {
font-family: 'FontAwesome';
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/fonts/fontawesome-webfont.ttf');
font-weight: normal;
font-style: normal;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/>
<script src="https://cdn.rawgit.com/konvajs/konva/0.11.1/konva.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="container" style="font-family:'FontAwesome'">dummyText</div>
</body>
</html>
here is a reference for the solution https://stackoverflow.com/a/35581429/3530081
Konva can't draw html into canvas. You may use different style options for text such as: fontFamily, fontSize, fontStyle, fontVariant (see docs).
Or you can convert html data into image (or canvas element) with html2canvas, then draw result via Konva.Image.
Related
I tried my best to copy this example here from the JSXGraph website:
https://jsxgraph.uni-bayreuth.de/wiki/index.php/Using_CSS_styles
Here's the abbreviated HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Covid Sandbox</title>
<meta name="description" content="Covid Sandbox">
</head>
<body>
<script src="third party/jquery-3.5.1.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph#1.1.0/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph#1.1.0/distrib/jsxgraph.css" />
<div id="jsxgbox">
</div>
</body>
</html>
<style>
.jsxgDefaultFont {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18;
}
.myFont {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
border: 1px solid black;
padding: 5px;
border-radius:5px;
}
</style>
<script src="js/test.js"></script>
Here's some Javascript I made to test it in test.js:
JXG.Options.text.cssClass = 'jsxgDefaultFont';
board = JXG.JSXGraph.initBoard('jsxgbox', {
boundingbox: [-1,15,15,-1],
showcopyright: false,
axis: true,
renderer: 'canvas',
defaultAxes: {
x: {
strokeColor: 'grey',
ticks: {
visible: 'inherit',
}
},
y: {
strokeColor: 'grey',
ticks: {
visible: 'inherit',
}
},
},
zoom: {
factorX: 1.25,
factorY: 1.25,
wheel: true,
needshift: false,
eps: 0.1
},
showZoom: false,
showNavigation: false,
});
var txt = board.create('text', [0,0, " <span id='par'>(</span> Hello world <span id='par'>)</span>"],
{
cssClass:'myFont', strokeColor:'red',
highlightCssClass: 'myFontHigh',
fontSize:20
});
board.update();
The inline HTML doesn't even appear to be interpreted correctly (shows span\ Hello World \span). Not sure what I'm doing wrong here.
Indeed, the example in the wiki is outdated. The priorities of CSS classes, default CSS styles and JSXGraph are a little bit delicate.Please, have a look at the API docs: https://jsxgraph.org/docs/symbols/Text.html#cssDefaultStyle.
If you want to overwrite font-family, you have to set cssDefaultStyle to the empty string:
JXG.Options.text.cssDefaultStyle = '';
JXG.Options.text.highlightCssDefaultStyle = '';
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-1,15,15,-1],
showcopyright: false,
axis: true,
// ...
});
var txt = board.create('text', [3,4,
" <span id='par'>(</span> Hello world <span id='par'>)</span>"
], {
cssClass:'myFont',
highlightCssClass: 'myFont',
strokeColor: 'red',
highlightStrokeColor: 'blue',
fontSize:20
});
See it live at https://jsfiddle.net/2jq8srpv/3/
I'm trying to include text in an SVG using the <text> element, but some reason when I do, it cuts the end off. I'm using moJS to do this. I tried adding the overflow: visible and still no luck. Below is the output:
class TaskText extends mojs.CustomShape {
getShape() {
return '<text x=0 y=35 font-size="10"><tspan style="font-weight: bold; overflow: visible">Commit changes to GitHub </tspan></text>';
}
}
mojs.addShape('tasktext', TaskText);
const text = new mojs.Shape({
shape: 'tasktext',
radius: 300,
x: -30,
scale: 0.4,
fill: 'black',
isShowStart: true,
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Custom</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
</body>
</html>
I can fix the look by manually increasing the width of the <div> that the SVG is nested on but I can't think of a way to target it. Is there a way to do this in SVG/JavaScript?
Thanks!
All I want to do is change the background color to transparent, yet I can't even change the color at all no matter the combination of options I see anywhere in the (fantastic!...) documentation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
In options of course for Classic GViz:
backgroundColor: {fill:'transparent'},
This will not work if you are using Materials BETA
But the following will work for Classic and Materials
Make a <style> block at the closing tag of </head>
Add this ruleset:
rect {
fill:transparent;
}
OP is using Materials and it is documented at the Materials Bar Chart section the following:
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
Also, the way options are declared is not finalized, so you must convert your options by replacing this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
In Snippet 2 one can plainly see that we can indeed make GViz chart background transparent. The core graphics are SVG, so if we want to have more control of our charts graphically, we would need to know a little SVG.
SNIPPET 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Basic GVis ChartWrapper Setup</title>
<style>
body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {fill:'transparent'},
title: 'Google Visualization ChartWrapper Setup',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 22
},
hAxis: {
textStyle: {
color: '#993300'
},
title: 'Subjects',
titleTextStyle: {
color: '#993300',
fontName: 'Verdana',
fontSize: 22
}
},
vAxis: {
maxValue: 1000,
textStyle: {
fontName: 'Verdana',
color: '#993300'
},
title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 16
}
}
};
function drawChart() {
chart = new google.visualization.ChartWrapper();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Place your URL within setDataSourceUrl(...HERE...)
chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
</script>
</head>
<body>
<header>
<details>
<summary>
<p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
<p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
</p>
</summary>
</details>
</header>
<section id="chart"></section>
</body>
</html>
SNIPPET 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: {
fill: 'transparent'
},
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
backgroundColor: {
fill: 'transparent'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
<style>
body {
background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
background-size: cover;
}
rect {
fill: transparent;
}
</style>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I am very new to JS and HTML so please bear with me.
I have a static image (in .jpg format) which is a kind of diagram containing 32 different circles. They are each numbered 1 - 32 however I am not able to manipulate the image in the sense that I cannot move the circles or change the numbers inside of them.
For the sake of simplicity, I have included an image below containing circles - this represents the image that I have.
My first objective is to make this image a thumbnail that, when clicked, expands to cover most of the page.
The following JQuery code serves this purpose:
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
I have inserted this into my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
#panel{ position: absolute; bottom: 10px; right: 10px; z-index: 1010101; display: block; width: 400px; height: 400px; overflow-y: auto; background: rgba(255,255,255,0.1); color: white;}
</style>
</head>
<body>
<div id='map'></div>
<div id = 'panel'>
<img id = "thumbnailImage" src="http://iskandarblue.github.io/mapbox/data/circles_page.jpg" width="350" height="250" alt="circles"/>'
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/dark-v8', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
$("#thumbnailImage").click(function() {
$(this).attr('width', '400');
$(this).attr('height', '300');
});
</script>
</body>
</html>
In this example, the image expands in the wrong direction (it expands outward rather than inward), and does not collapse again when clicked twice. Is there an easy way to fix this ?
Now, once the image has expanded, I would like the user to be able to hover over a circle and see a popup text much like what the tipsy jQuery plugin does (see here): http://onehackoranother.com/projects/jquery/tipsy/
I am not sure how to proceed or how to conceptualize the problem. What's the easiest way to assign pop-up functions to circles on a static image and how can these popups (or tooltips) be activated only when the image is in expanded mode? Any advice would be appreciated.
When using kineticjs, how do i simulate the behavior of a div box with specified height and width with overflow:hidden, that when the text goes beyond the height of the div box, the remainding text is hidden.
See http://jsfiddle.net/8t9QV/, when my height is set to 1, the first line "Complex Text" is still displayed?!
What is the behavior of height and width in kinetic.Text?
You can put your text in a Kinetic.Group container and then set that group's clip property to prevent your text from overflowing outside the group:
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/M5m8P/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
width:100,
height:50,
clip:[0,0,100,50]
});
layer.add(group);
var rect= new Kinetic.Rect({
x:0,
y:0,
width:group.getWidth(),
height:group.getHeight(),
fill:"skyblue"
});
group.add(rect);
var text = new Kinetic.Text({
x:5,
y:20,
text:"Rudolph the Red Nosed Reindeer...",
fill: 'red',
});
group.add(text);
layer.draw();
$("#myButton").click(function(){});
}); // end $(function(){});
</script>
</head>
<body>
<button id="myButton">Button</button>
<div id="container"></div>
</body>
</html>