I am working on a word search game. I needed to know how can I select and store the text using mouse on a canvas to compare with the stored set of words. Does canvas provide the drag and select functionality?Please help! Or if there is some other way like easeljs.
I am searching for drag and select something like http://wordsearch.randomsaladgames.com/
As Epistemex says, canvas does not "remember" where you drew the text on the canvas so it can't locate or drag that text.
You would have to implement the logic to "remember" the text yourself using javascript.
If you want to implement the logic then here's an outline of the tools you'll need.
create an object that holds your text's characteristics (x,y,width,height,textContent)
create a function that clears the canvas and redraws the text at a new x,y position
listen for mouse events and reposition the text based on how far the user has dragged the mouse
Canvas libraries have done the implementation work for you.
Here's an example using KineticJS: http://jsfiddle.net/m1erickson/WxGrQ/
<!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-v5.0.1.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 text = new Kinetic.Text({
x:100,
y:100,
text:"Drag this Text",
fontSize:18,
fill: 'red',
stroke: 'black',
strokeWidth: .5,
draggable: true
});
layer.add(text);
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<h4>Grab the text and drag it.</h4>
<div id="container"></div>
</body>
</html>
Working Demo:
http://jsfiddle.net/JSdc2/6gnTm/1/
It's draggable.
Kinetic JS can at least let you 'drag' text as a separate object, like I think you are looking for. The demo has some other functionality that is probably not what you need, but this is a demo I made for another purpose, just reusing it here.
var textGroup = new Kinetic.Group({ // I put everything in groups, and groups can be draggable, so can text nodes.
x: 200,
y: 30,
draggable: true
});
// create the text path with text on it
var textpath = new Kinetic.TextPath({
x: 0,
y: 0,
id: 'textpath1',
align: 'center',
fill: '#333',
fontSize: '48',
fontFamily: 'sans-serif',
text: typedText,
data: SVGdataString
});
textGroup.add(textpath);
Related
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.
I'm working with PaperJS. When I resize the browser window, I ask the canvas to redraw. However, the graphics do not re-center, as I draw the graphics from view.center:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/paper-full.min.js"></script>
<script type="text/paperscript" canvas="paperjs-canvas">
var center = new Path.Circle(view.center, 450);
center.fillColor = '#000000';
function onResize(event) {
// redraw canvas
paper.view.draw();
}
</script>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden; /* avoid Mac / Chrome overscroll */
}
#paperjs-canvas {
width: 100%;
height: 100%;
background-color: #D0E7D1;
}
</style>
</head>
<body>
<canvas id="paperjs-canvas" class="off" data-paper-resize="true"></canvas>
</body>
</html>
I checked from Developer Console that the resize function is called every time I resize the browser, but the paper.view.draw(); does not re-align the graphics.
What did I miss?
Running on Google Chrome 41, Mac OS X 10.10.2
View.center is just a regular coordinate. There's nothing special about it that keeps an object positioned there locked at the "center" of the canvas.
If you want to keep the same point as view.center after resizing the canvas, you can use view.scrollBy(point) to transform the coordinate system. Just keep in mind that the point [0,0] may no longer correspond to the top-left of the canvas.
var center = new Path.Circle(view.center, 240);
center.fillColor = '#000000';
var lastPoint = view.center;
function onResize(event) {
view.scrollBy(lastPoint.subtract(view.center));
lastPoint = view.center;
}
Here's a sketch on paper.js
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 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);