basic code in place for taking a screenshot of the current view
This commit is contained in:
Connor Turland
parent
fb8c006be1
commit
11f673f7c5
4 changed files with 64 additions and 16 deletions
|
|
@ -26,7 +26,12 @@ Metamaps.JIT = {
|
|||
};
|
||||
$(".zoomExtents").click(zoomExtents);
|
||||
|
||||
$(".takeScreenshot").click(Metamaps.Map.exportImage);
|
||||
$(".takeScreenshotCurrent").click(function(){
|
||||
Metamaps.Map.exportImage('current');
|
||||
});
|
||||
$(".takeScreenshotFull").click(function(){
|
||||
Metamaps.Map.exportImage('full');
|
||||
});
|
||||
|
||||
self.topicDescImage = new Image();
|
||||
self.topicDescImage.src = '/assets/topic_description_signifier.png';
|
||||
|
|
|
|||
|
|
@ -4522,19 +4522,26 @@ Metamaps.Map = {
|
|||
Metamaps.Map.timeToTurn = 0;
|
||||
Metamaps.Map.turnCount = 0;
|
||||
},
|
||||
exportImage: function() {
|
||||
exportImage: function(view) {
|
||||
|
||||
var canvas = {};
|
||||
var WIDTH = 1880,
|
||||
HEIGHT = 1260,
|
||||
canvas = {},
|
||||
current = view === 'current' ? true : false,
|
||||
original = Metamaps.Visualize.mGraph.canvas,
|
||||
modScale = original.scaleOffsetX,
|
||||
modTransX = original.translateOffsetX,
|
||||
modTransY = original.translateOffsetY;
|
||||
|
||||
canvas.canvas = document.createElement("canvas");
|
||||
canvas.canvas.width = 1880; // 960;
|
||||
canvas.canvas.height = 1260; // 630
|
||||
canvas.canvas.width = WIDTH;
|
||||
canvas.canvas.height = HEIGHT;
|
||||
|
||||
canvas.scaleOffsetX = 1;
|
||||
canvas.scaleOffsetY = 1;
|
||||
canvas.translateOffsetY = 0;
|
||||
canvas.translateOffsetX = 0;
|
||||
canvas.denySelected = true;
|
||||
canvas.translateOffsetY = 0;
|
||||
canvas.denySelected = current ? false : true;
|
||||
|
||||
canvas.getSize = function() {
|
||||
if(this.size) return this.size;
|
||||
|
|
@ -4565,7 +4572,7 @@ Metamaps.Map = {
|
|||
return this.canvas.getContext("2d");
|
||||
};
|
||||
// center it
|
||||
canvas.getCtx().translate(1880/2, 1260/2);
|
||||
canvas.getCtx().translate(WIDTH/2, HEIGHT/2);
|
||||
|
||||
var mGraph = Metamaps.Visualize.mGraph;
|
||||
|
||||
|
|
@ -4574,11 +4581,15 @@ Metamaps.Map = {
|
|||
var T = !!root.visited;
|
||||
|
||||
// pass true to avoid basing it on a selection
|
||||
Metamaps.JIT.zoomExtents(null, canvas, true);
|
||||
if (!current) Metamaps.JIT.zoomExtents(null, canvas, true);
|
||||
else if (current) {
|
||||
canvas.translate(modTransX, modTransY);
|
||||
canvas.getCtx().scale(modScale, modScale);
|
||||
}
|
||||
|
||||
var c = canvas.canvas,
|
||||
ctx = canvas.getCtx(),
|
||||
scale = canvas.scaleOffsetX;
|
||||
scale = current ? modScale : canvas.scaleOffsetX;
|
||||
|
||||
// draw a grey background
|
||||
ctx.fillStyle = '#d8d9da';
|
||||
|
|
|
|||
|
|
@ -915,16 +915,45 @@
|
|||
z-index: 4;
|
||||
}
|
||||
|
||||
.takeScreenshot {
|
||||
.screenshotControls {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.screenshotControls:hover {
|
||||
height: 64px;
|
||||
}
|
||||
.screenshotControls:hover .takeScreenshotCurrent {
|
||||
bottom: 32px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.screenshotControls:hover .takeScreenshotFull {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.takeScreenshotCurrent {
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
-webkit-transition: bottom .1s ease-in-out; /* For Safari 3.1 to 6.0 */
|
||||
transition: bottom .1s ease-in-out;
|
||||
}
|
||||
|
||||
.takeScreenshotFull {
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
bottom: 0;
|
||||
background-image: url(screenshot_sprite.png);
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.takeScreenshot:hover {
|
||||
.takeScreenshotFull:hover {
|
||||
background-position: -32px 0;
|
||||
}
|
||||
.canEditMap .takeScreenshot {
|
||||
.canEditMap .takeScreenshotFull {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -938,7 +967,7 @@
|
|||
background-position: -32px 0;
|
||||
}
|
||||
|
||||
.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
|
||||
.zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshotFull:hover .tooltips, .takeScreenshotCurrent:hover .tooltips, .sidebarCollaborateIcon:hover .tooltipsUnder,
|
||||
.sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
|
||||
.mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove {
|
||||
display: block;
|
||||
|
|
@ -1033,7 +1062,7 @@
|
|||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.zoomExtents div::after, .zoomIn div::after, .zoomOut div::after, .takeScreenshot div:after {
|
||||
.zoomExtents div:after, .zoomIn div:after, .zoomOut div:after, .takeScreenshotFull div:after, .takeScreenshotCurrent div:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 57%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<div class="mapControls mapElement">
|
||||
<div class="takeScreenshot mapControl"><div class="tooltips">Capture Screenshot</div></div>
|
||||
<div class="screenshotControls">
|
||||
<div class="takeScreenshotCurrent mapControl"><div class="tooltips">Capture Current View</div></div>
|
||||
<div class="takeScreenshotFull mapControl"><div class="tooltips">Capture Full Map</div></div>
|
||||
</div>
|
||||
<div class="zoomExtents mapControl"><div class="tooltips">Center View</div></div>
|
||||
<div class="zoomIn mapControl"><div class="tooltips">Zoom In</div></div>
|
||||
<div class="zoomOut mapControl"><div class="tooltips">Zoom Out</div></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue