I have a canvas defined in a div. I have set the option the oveflow option in div to scroll. when I set any content in the canvas. I'm able to scroll. How can I have the same affect using KineticJS ?
Scrollbars in KineticJS
Same concept really!
Wrap the kineticJS container in a wrapper div:
<div id="wrapper">
<div id="container"></div>
</div>
Next set the wrapper div to your desired smaller size (with overflow:scroll):
#wrapper{ overflow:scroll; width:300px; height:350px;}
And then just set your kinetic stage size to your large-as-life size:
var stage = new Kinetic.Stage({
container: 'container',
width: 740,
height: 463
});
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/j4RGL/
<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
#wrapper{ overflow:scroll; width:300px; height:350px; border:2px solid blue; }
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 740,
height: 463
});
var layer = new Kinetic.Layer();
stage.add(layer);
var image=new Image();
image.onload=function(){
var kImg=new Kinetic.Image({
image:image,
id:99,
x:0,
y:0,
width:740,
height:463,
draggable:false
});
layer.add(kImg);
layer.draw();
}
image.src="http://www.mrwallpaper.com/wallpapers/Colorful-New-York-City.jpg";
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<div id="container"></div>
</div>
</body>
</html>
Related
HTML5 canvas showing blurry context.
The red rectangle, on green background:
When I made the canvas width & height == window width & height (fullpage). Also it is showing a horizontal scrollbar even if the body{ margin: 0; }. How can i fix this ?
my code
html ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
css ->
body
{
margin: 0;
}
canvas
{
/*border: 1px solid black;*/
background: green;
}
jquery ->
$(document).ready(function(){
$.fn.showMSG = function(){
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.width($(window).width());
canvas.height($(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,50,50);
}
$(window).ready(function(){
$.fn.showMSG();
});
});
Your code is calling the .width() and .height() methods on the canvas. This doesn't change the height and width attribute of the canvas, but rather its height and width style which causes it to look stretched. Instead use .attr() to change the height and width attribute of the canvas.
See working example below:
$(document).ready(function() {
$.fn.showMSG = function() {
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.attr('width', $(window).width());
canvas.attr('height', $(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 50, 50);
}
$(window).ready(function() {
$.fn.showMSG();
});
});
body {
margin: 0;
overflow: hidden;
}
canvas {
/*border: 1px solid black;*/
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
<html>
<head>
<style type="text/css">
canvas{
border:1px solid #ccc;
}
.canvas-container{
float: left;
left: 20px;
}
</style>
</head>
<body>
<canvas id='canvas' width='500' height='600' ></canvas>
<canvas id='C2' width='500' height='600'></canvas>
<script type="text/javascript" src="fabric.js"></script>
<script>
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.transparentCorners = false;
var radius = 300;
fabric.Image.fromURL('./images/Chrysanthemum.jpg', function(img) {
img.scale(0.4).set({
left: 10,
top: 100,
angle: 0,
clipTo: function (ctx) {
ctx.rect(-250, -250, 400, 400);
}
});
canvas.add(img).setActiveObject(img);
console.log(canvas.getActiveObject());
});
})();
</script>
</body>
----------
</html>
//the code above;
Now the active object size is the same as the image which has not been cropped;
But if there is any way to make the cropped image to be selected.Means the smaller size which will be selected in a smaller size.
thx!
Clip is not meant for that effect:
If you desire some cropping better go with pattern trick if your cropping differs from what the attribute preserverveAspectRatio allows you.
(basically crop in center, crop left crop right, both for x and y axis).
As you see instead of image i create a rect with desired dimensions, then i use the img loaded to create a pattern that will fill the rect.
You can then use offsetX and offsetY on pattern to modify the part of image visible.
offsets are accessible trought:
rect.fill.offsetX
rect.fill.offsetY
(function() {
var canvas = this.__canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.transparentCorners = false;
var radius = 300;
fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
var rect = new fabric.Rect({width: 400, height: 400});
var pattern = new fabric.Pattern({source: img.getElement(), offsetX: -20, offsetY: -50});
rect.scale(0.4).set({
left: 10,
top: 100,
angle: 0,
fill: pattern,
});
canvas.add(rect).setActiveObject(rect);
});
})();
canvas{
border:1px solid #ccc;
}
.canvas-container{
float: left;
left: 20px;
}
<canvas id='canvas' width='500' height='600' ></canvas>
<canvas id='C2' width='500' height='600'></canvas>
<script type="text/javascript" src="http://fabricjs.com/lib/fabric.js"></script>
I have been trying to find a way to set the location on peg man in google maps via programming instead of dragging and dropping.Is there a way to set the location of pegman on google maps programmatically?
better late than never, but you're looking for the pano function setPosition
setStreetView sets the pano view, but setPosition should place pegman.
May be the below code will be helpful to you :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
Im loading a google map. The html is:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head
<body>
<div id="map-canvas"></div>
This displays fine. However, if I wrap the map-canvas div in a div, nothing displays!
<div>
<div id="map-canvas"></div>
</div>
I can see in firebug the google map html gets rendered but nothing is visible...
To be able to display the map with it's height set to 100%, all parent tags must have their height set to 100%.
That being said, the map's parent div height also needs to be 100%.
html, body, #map-canvas, #map_container {
margin: 0;
padding: 0;
height: 100%;
}
And the code for the map and the div
<div id="map_container">
<div id="map-canvas"></div>
</div>
After this everything should work fine.
Try to put directly remove outside <div> tag
<div id="map-canvas"></div>
put like above
I am using transitionTo method of kineticJS to show animated rotation of a shape on click event of mouse. It works fine if we click the shape first time but then on subsequent clicks it does not rotate the shape. I want to show transition(rotation) of the shape by some angle every time I click on it. Please let me know the mistake I am making and how can I correct it??
This is the code I am using
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer({
x:stage.getWidth()/3 ,
y: stage.getHeight()/3
});
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
centerOffset: [50, 100]
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
rect.on("click", function() {
rect.transitionTo({
rotation:2*Math.PI,
duration:1
});
stage.draw();
});
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Try this:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
<script>
window.onload = function() {
var angle = 0;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
layer.add(rect);
stage.add(layer);
rect.on("click", function() {
angle += 2;
rect.transitionTo({
rotation: Math.PI * angle,
duration:1
});
});
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
The click was working just fine, however you were telling it to rotate to the same angel every time (why it only animates on the first click). I added a variable so that the angle increases 360 degrees every time you click on it.