Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
Related
I'm trying to add a D3.js liquid fill gauge (http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) in a Leaflet popup without succeeding.
Here is my code:
var map = L.map('map').setView([47.261491,-1.549244], 16);
var dataCenterIcon = L.icon({
iconUrl: 'images/datacenter-icon.png',
iconSize: [20, 20] // size of the icon
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
onEachFeature : function (feature, layer) {
var div = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
// var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
// svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
loadLiquidFillGauge("gauge",55);
}}).addTo(map);});
d3.json("data/trajetsFibreDCSigma.json",function (data){
L.geoJson(data, {
style: function(feature){return {color : feature.properties.stroke};}
}).addTo(map);
});
<!DOCTYPE html>
<html>
<head>
<title>Yepee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/liquidFillGauge.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- <svg id="gauge"/>-->
<script src="js/yepee.js" type="text/javascript"></script>
</body>
</html>
When I'm trying to display my map, I can't even see the markers and I've got this error:
TypeError: d3_window(...) is null
I can also load a liquid fill gauge on a svg element which isn't on my map.
I've tried to add just a simple svg square in the popup by following an example (http://jsfiddle.net/2XfVc/132/) and it worked.
The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.
Thank you in advance for your answers.
You're trying to initialize the gauge when the actual SVG element isn't added to the DOM yet. Once the popup opens, the content gets added to the DOM, that's when you should initialize the gauge.
// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'
// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)
// Catch popup open event
map.on('popupopen', function (e) {
// Initialize the gauge with current popup option's value
loadLiquidFillGauge('gauge', e.popup.options.value);
})
Demo on Plunker: http://embed.plnkr.co/2hMjBt/preview
I am trying to place the HOT element with (height:100%) inside position:fixed container.
But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.
I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.
var ex = $('#example').parent();
$('#example').height(ex.height());
It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 100000.
<!DOCTYPE html>
<html>
<head>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
<div style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
<div id="example" style="overflow:auto; height:100%"></div>
</div>
</div>
<script type="text/javascript">
var data = Handsontable.helper.createSpreadsheetData(100000, 10);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
stretchH: 'all',
contextMenu: true
});
</script>
</body>
</html>
Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?
Thanks
I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:
let height = $(window).height() - $("#hot-container").offset().top;
And if you want it to always keep the 100% height, even on resize, then add:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
Has anyone here have done clipping an image within an image? I've seen so far about clipping on the canvas but are all regular shapes(rectangle, circle, etc...). It would be nice if some have actually done it.
P.S. with fabric.js or just the regular canvas.
Sure, you can use compositing to draw a second image only where the first image exists:
ctx.drawImage(image1,0,0); // this creates the 'mask'
ctx.globalCompositeOperation='source-in';
ctx.drawImage(image2,0,0); // this image only draws inside the mask
Illustration: House image drawn first and second Grass image is drawn only where house pixels exist:
Example code an a Demo: http://jsfiddle.net/m1erickson/r71d8d8b/
<!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>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// put the paths to your images in imageURLs[]
var imageURLs=[];
// push all your image urls!
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mower_start.png");
// the loaded images will be placed in images[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);
function loadAllImages(callback){
for (var i=0; i<imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function(){
imagesOK++;
if (imagesOK>=imageURLs.length ) {
callback();
}
};
img.onerror=function(){alert("image load failed");}
img.crossOrigin="anonymous";
img.src = imageURLs[i];
}
}
function start(){
// the imgs[] array now holds fully loaded images
// the imgs[] are in the same order as imageURLs[]
ctx.drawImage(imgs[0],50,50);
ctx.globalCompositeOperation='source-in';
ctx.drawImage(imgs[1],0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Second grass image is drawn only where<br>house pixels already existed<br>(Uses 'source-in' compositing)</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I have 48 coordinates/markers in 1 column/row.
When I double-click in that row and open preview KML link, it shows 48 coordinates.
But when I create my own map and show that marker using fusion tables and SQL queries,
the map only shows 3 markers.
Why is the output different in Fusion tables versus my own map?
Or, is there any technical limitation when using Google Fusion and Map APIs
Thanks Guys
------------------EDIT-------------------
in coordinate column [Koordinat Pohon] in rowid 17001 actualy it has 48 coordinate but it only show 3 coordinate in my own map.
TABLE ID : 1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR
ROW ID : 17001
<!DOCTYPE html>
<?php
$id=$_GET['id'];
?>
<input type="hidden" value="<?php echo $id;?>" id="rowid"/>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables queries</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>
var rowid=document.getElementById("rowid").value;
var map;
function initialize() {
var centerMAP = new google.maps.LatLng(-7.402438, 110.446957);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: centerMAP,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var layer = new google.maps.FusionTablesLayer({
query: {
select:"Koordinat Pohon",
from: "1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR",
where: "rowid = "+rowid
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<?php
?>
When I use your code I don't see 3(as mentioned) or 48(as expected) markers, I see 10 markers.
The reason may be found at
https://developers.google.com/maps/documentation/javascript/fusiontableslayer#limits
When looking at the map, you may notice: The ten largest-area components of a multi-geometry are shown.
The KML is a multi-geometry, the number of features that will be shown is limited to 10
What you can do:
store only single points in a column
ommit the FusionTablesLayer and instead request the geometry via AJAX and create the markers on your own
In my application, the user is allowed to define his own headers and margins for printing.
For the header, the user can provide the following two fields:
(a) Page Top Margin in mm (from top of the page)
(b) Header Margin in mm (from top of the page)
The fields (a) and (b) are as shown in the figure below:
For example, if the user provides (a) as 10mm and (b) as 100mm, then the height of the 'Header Region' would be 90mm.
Now the content within the header needs to be aligned at the top of the Header Region.
Is there a way to set the Header Region Height and to top-align the content within this header region.
At present, i am doing the following for the header-html option:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 90mm; //in actual program, this is set dynamically in PHP
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div>
//text
</div>
</body>
</html>
The margin-top option is being set as 100mm.
I have tried setting vertical-align: top for the body CSS, But that too did not work.
The final output that I achieve does not seem to have the Header Region content vertical aligned in either top or middle. It is somewhere a little above the middle of the Header Region.
Edit: This fix seems to be required only when wkhtmltopdf is installed in a Windows based system.
After lot of trial and error, I observed that the following logic seems to be work:
The body element of html-head needs to be set to an height 1.33 times the actual height of the Header Region. (Why? I do not know. This could be due to some QT or wkhtmltopdf way of rendering, but it actually works for all cases, irrespective of the lines in the Header Region content).
The immediate (and the only) child element of the body is set to 100% height and to hide the overflowing content
So, the changed code (for the above example) for html-head looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 120mm;
/*
In the actual program this height is calculated dynamically in PHP as
($headerMargin - $topMargin) * 1.33
*/
}
#master-div
{
overflow: hidden;
height: 100%;
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div id="master-div">
//The actual content goes here
</div>
</body>
</html>
I have checked this for atleast 7 to 8 different paper sizes (including setting custom page-width and page-height. Also checked with different Header Region content size (ranging from 1 line to 20 lines).
The only catch is that this logic of 1.33 times the header region height seems to work only if the Header Margin(b)/Footer Margin is less than or equal to one-third the paper-height. If the margin height goes beyond that the content gets clipped as the margin-height increases. But having such large header-heights would generally not be required, i guess.