artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 13:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved zoom, auto fit images on load

Browse Source
This commit is contained in:
Vilius 2016-08-07 19:49:56 +03:00
parent 37ce89c9d6
commit b7bbfd9aab
3 changed files with 36 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -77,12 +77,12 @@
<div id="preview">
<canvas id="canvas_preview"></canvas>
<div style="margin-top:105px;padding-left:5px;">
<input onclick="GUI.zoom(-1);EVENTS.scroll_window();" style="width:30px;" class="layer_add" type="button" value="-" />
<input onclick="GUI.zoom(+1);EVENTS.scroll_window();" style="width:30px;" class="layer_add" type="button" value="+" />
<input onclick="GUI.zoom(+1, true);" style="width:30px;" class="layer_add" type="button" value="+" />
<input onclick="GUI.zoom(-1, true);" style="width:30px;" class="layer_add" type="button" value="-" />
<div style="display: inline-block;margin: 5px 0px;">
<b class="trn">Zoom</b>: <span id="zoom_nr">100</span>%
</div>
<input style="width:95%;" id="zoom_range" type="range" value="100" min="50" max="1000" step="50" oninput="GUI.zoom(this.value);EVENTS.scroll_window();" />
<input style="width:95%;" id="zoom_range" type="range" value="100" min="50" max="1000" step="50" oninput="GUI.zoom(this.value, true);" />
</div>
</div>
<div id="layers_base">
@ -128,6 +128,16 @@
<li><a class="trn dots" onclick="call_menu(IMAGE, 'image_size');" href="#">Size</a></li>
<li><a class="trn" onclick="call_menu(IMAGE, 'image_trim');" href="#">Trim</a>
<li><a class="trn" onclick="call_menu(IMAGE, 'image_crop');" href="#">Crop Selection</a>
<li class="more">
<a class="trn" href="#">Zoom</a>
<ul>
<li><a class="trn" onclick="call_menu(IMAGE, 'zoom_in');" href="#">Zoom In</a></li>
<li><a class="trn" onclick="call_menu(IMAGE, 'zoom_out');" href="#">Zoom Out</a></li>
<li><div class="mid-line"></div></li>
<li><a class="trn dots" onclick="call_menu(IMAGE, 'zoom_original');" href="#">Original size</a></li>
<li><a class="trn dots" onclick="call_menu(IMAGE, 'zoom_auto');" href="#">Fit window</a></li>
</ul>
</li>
<li><div class="mid-line"></div></li>
<li><a class="trn dots" onclick="call_menu(IMAGE, 'image_resize');" href="#">Resize</a></li>
<li class="more">

22
js/image.js
View File

@ -1084,4 +1084,26 @@ function IMAGE_CLASS() {
}
return n;
};
this.zoom_in = function() {
GUI.zoom(+1, true);
};
this.zoom_out = function() {
GUI.zoom(-1, true);
};
this.zoom_original = function() {
GUI.zoom(100, true);
};
this.zoom_auto = function(only_increase) {
var canvas_wrapper = document.querySelector('#canvas_wrapper');
var page_w = canvas_wrapper.clientWidth;
var page_h = canvas_wrapper.clientHeight;
var best_width = page_w / WIDTH * 100;
var best_height = page_h / HEIGHT * 100;
var best_zoom = Math.floor(Math.min(best_width, best_height));
if(only_increase != undefined && best_zoom > 100){
return false;
}
GUI.zoom(Math.min(best_width, best_height), true);
};
}

2
js/layers.js
View File

@ -319,7 +319,7 @@ function LAYER_CLASS() {
document.getElementById(name).getContext("2d").globalAlpha = 1;
document.getElementById(name).getContext('2d').drawImage(img, 0, 0);
LAYER.layer_renew();
GUI.zoom();
IMAGE.zoom_auto(true);
};
img.onerror = function (ex) {
POP.add({html: '<b>The image could not be loaded.<br /><br /></b>'});