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);
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 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 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);
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>