I have to load Libre Barcode 128 font family in to fabric canvas. But Barcode doesn't view on canvas. How to set Libre Barcode 128 font family in fabric js canvas?
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#sew3435'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", 'Libre Barcode 128');
canvas.renderAll();
}, 1000)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<script src="html2canvas.js"></script>
<style>
.ss {
font-family: 'Libre Barcode 39 Text';
font-size: 48px;
}
</style>
</head>
<body>
<div class="ss">Making the Web Beautiful!</div>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
The actual font is a 3-of-9 font, not 128 (though they are treated the same way) and the name should be (as defined in the CSS):
.set("fontFamily", "'Libre Barcode 39 Text'");
You might have to "preuse" the font on an DOM element before it will be picked up by the canvas.
Update: seems as FabricJS uses incoming string as-is so the inner quotes must be added also there due to the spaces in the font family name (included here for completeness).
Fiddle example
var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
canvas = new fabric.Canvas('c');
setTimeout(function() {
text = new fabric.Text("Text", {
fontSize: 70,
left: 100,
top: 0,
fill: '#f00'
});
canvas.add(text).setActiveObject(text);
canvas.getActiveObject().set("fontFamily", "'Libre Barcode 39 Text'");
canvas.renderAll();
}, 500)
});
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
</head>
<body>
<canvas id="c" width=500 height=250></canvas>
</body>
</html>
We have to set font family name with in single quotes like " 'Libre Barcode 39 Text' ", Finally it works for me.
Related
I think I've hit a wall here. Not sure why my map isn't displaying at all.
I've converted the topojson file to geojson with the topojson client (https://github.com/topojson/topojson-client/blob/master/README.md)
Here's my JS file (I'm seeing my #map and background color, but nothing is rendering inside.)
var width = 900,
height = 600;
var svg = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geoAlbersUsa()
var path = d3.geoPath()
.projection(projection);
d3.json("https://gist.githubusercontent.com/Lupi7000/d770ce6f2985c3a7bac1099688e4f772/raw/d327f59834fb0f9f2201ad71c3f1711ecb5bf6de/NYTest.json")
.then(function(d) {
console.log(d)
var counties = topojson.feature(d, d.objects.cb_2015_new_york_county_20m)
console.log(counties)
svg.selectAll('path').data(counties.features)
.enter().append('path')
.attr('d', path);
});
Here's my HTML
<html>
<head>
<meta charset="UTF-8">
<title> NYS Map</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson#3.0.2/dist/topojson.min.js"></script>
<script src="https://unpkg.com/topojson-client#3"></script>
<script src="NYmap.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3> NYS MAP CLICKABLE AND SHIT... EVENTUALLY</h3>
<div id="map"><!-- MAP CONTAINER --></div>
</body>
</html>
And my stylesheet
body {
margin: 25px;
}
#map {
width: 900px;
height: 600px;
border: 1px solid black;
background: whitesmoke;
}
path {
fill: black;
}
Any help would be appreciated, thanks!
I've console logged my data so it's coming through, but I'm not sure what I need to do to make it show up.
I am using the latest KendoUI, and try to set a gauge like the kendoUI's offical web site AD image shows.
you could find the AD image just at: http://www.telerik.com/kendo-ui
please see the image, it shows an application named "northwind-dash", and there is a green gauge on it, there is a white color text "63%" inside the gauge.
I try the code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="gauge-container">
<div id="gauge"></div>
<input id="gauge-value" value="65">
</div>
<script>
function createGauge() {
$("#gauge").kendoRadialGauge({
pointer: {
value: $("#gauge-value").val()
},
scale: {
minorUnit: 5,
startAngle: -30,
endAngle: 210,
max: 180
}
});
}
$(document).ready(function() {
createGauge();
function updateValue() {
$("#gauge").data("kendoRadialGauge").value($("#gauge-value").val());
}
if (kendo.ui.Slider) {
$("#gauge-value").kendoSlider({
min: 0,
max: 180,
showButtons: false,
change: updateValue
});
} else {
$("#gauge-value").change(updateValue);
}
$(document).bind("kendo:skinChange", function(e) {
createGauge();
});
});
</script>
<style scoped>
#gauge-container {
background: transparent url("../content/dataviz/gauge/gauge-container-partial.png") no-repeat 50% 50%;
width: 386px;
height: 386px;
text-align: center;
margin: 0 auto 30px auto;
}
#gauge {
width: 350px;
height: 300px;
margin: 0 auto;
}
#gauge-container .k-slider {
margin-top: -11px;
width: 140px;
}
</style>
</div>
</body>
</html>
But, I could only get the normal Radial Gauge.
I look everywhere in the KendoUI's document, but can't find anything about the northwind-dash demo or example.
Who knows how to change the style of the Gauge to make it just like the image shows.
yours,
Ivan
You can find the sources for KendoUI + Northwind application in GitHub and you can see a version running in Telerik ASPNET-MVC demo site
But no, it does not look like the capture that they have, not sure if that's an older version of this project or an internal one.
Nevertheless, there is no option for placing that percentage and you have to do it manually playing with HTML and CSS.
What you might do is define the Chart using a DataSource like this:
$("#value").kendoChart({
// Define Data Source, the first element is the value to represent,
// the second is 100 - first element.
dataSource: {
data: [
{ "value": 63 },
// The remaining part of the Chart is transparent so we actually
// only see the first value
{ "value": 37, color: "transparent" }
]
},
// Define a DataBound event handler used when we change the data and will
// print the value inside the Chart.
dataBound: function () {
// Get current value and compute percentage.
var percentage = (this.dataSource.at(0).value / 100);
// Convert percentage to text and place it in inside the chart
$("#value-label").text(kendo.toString(percentage, "p0"));
},
// No legend
legend: {
visible: false
},
seriesDefaults: {
// Type of series: Donut
type: "donut",
// Size of the hole of the Donut
holeSize: 60,
// Thickness of the Donut
size: 20
},
series: [
// The value of the series is in "value" field while the color is
// a field called color.
{ field: "value", colorField: "color" }
],
// No tooltip
tooltip: { visible: false }
});
Now, the HTML and CSS definition for placing the label on top of the Chart:
<div class="value-container">
<div id="value"></div>
<div id="value-label" class="overlay"></div>
</div>
A container that includes two DIV the first for the Chart and the second for the label. In order to display the label on top of the Chart, we define a CSS class overlay as follow:
.overlay {
font-size: 24px;
width: 100%;
height: 100%;
position: absolute;
top: 220px;
left: 0;
text-align: center;
}
Where we specify the size of the label and its position from top and centered horizontally (here I hardcoded the vertical position (220px) but you can find for methods for centering a text in a DIV.
You can see it in action here: http://jsfiddle.net/OnaBai/egfrohtx/
Which looks like:
I am trying to animate an object with snap.svg, it's showing but not scaling.
Here's my code.
It works only if I generate the object with code but not working with loaded svg objects.
Why it's not being animated on hover?
<html>
<head>
<title></title>
<script type="text/javascript" src="snap.svg.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#svg {
width : 600px;
height : 600px;
}
</style>
</head>
<body>
<svg id="svg"> </svg>
</body>
<script type="text/javascript">
var paper = Snap("#svg");
Snap.load("balls.svg" , function(d){
var icon = d.select('#round_ball');
var back = d.select('#background');
paper.append(d);
back.attr({
fill : '#000000'
});
icon.hover(function(event) {
this.animate({
transform : "t110,150",
filter: f
}, 200, mina.easeout);
}, function(event) {
this.animate({
transform : "t0,0"
}, 200, mina.easeout);
});
});
</script>
</html>
I have an object and now i want to show the anchor points in order to increase or decrease the width of object on hovering.
How can i achieve this from HTML5 canvas?
How to join the objects by using the canvas library?
A canvas drawing library would give you a shortcut to user-rescaling.
Here is an example of the FabricJS canvas drawing library automatically displaying anchor points. The user can resize and rotate with the anchor points.
You can download the FabricJS canvas library here: https://github.com/kangax/fabric.js
After you download the library, you need to go to the “dist” folder and copy the “all.min.js” file to your scripts folder. Be sure to reference “all.min.js” as a script in your html file.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/g33Vp/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/all.min.js"></script>
<style>
body{ background-color: ivory; padding:30px; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
// tell FabricJS to manage your canvas drawing
var canvas = new fabric.Canvas('canvas');
// draw a Fabric rectangle on the canvas
// the rectangele comes with drag/scale/rotate built in!
var rect = new fabric.Rect({
left: 150,
top: 150,
width: 75,
height: 50,
fill: 'green',
angle: 20,
padding: 10
});
canvas.add(rect);
}); // end $(function(){});
</script>
</head>
<body>
<br/><p>Click on the green rectangle to activate anchor points</p>
<br/><p>Then drag the anchor points to resize / rotate</p><br/>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
I've been trying to use Kineticjs 4.3.3. to create a graphical image and can be dragged across a parent div, but it will not work if the parent div has scalling set under its style properties ( example provided http://jsfiddle.net/kreavie/MZSE9/). Does anyone have any ideas how to get dragging to work when scalling is previously set?
Thanks,
krlib
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script type="text/javascript">
window.onload = function () {
var par = document.getElementById('frame');
var canvas = document.createElement('div');
canvas.id = "canvas1";
par.appendChild(canvas);
var stage = new Kinetic.Stage({
container: 'canvas1',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var triangle = new Kinetic.Polygon({
stroke: "red",
strokeWidth: 4,
points: [60, 100, 90, 100, 90, 140],
draggable: true
});
layer.add(triangle);
stage.add(layer);
}
</script>
</head>
<body >
<div id="frame" style="width: 200px; height: 200px; -ms-transform: scale(0.420091);">
</div>
</body>
</html>
See: http://jsfiddle.net/MZSE9/2/
Your object is local to the canvas element, not to another div in which you apply scaling.
if you want to scale an object, layer, or the entire stage just do:
shape.setScale(xAmount, yAmount);
stage.setScale(xAmount, yAmount);
layer.setScale(xAmount, yAmount);