console
var canvasW,minW,minH;
var onload = () => {
let cav = document.getElementById('canv');
let d = cav.getContext('2d');
d.canvas.width = Math.min(window.innerHeight, window.innerWidth) - 130;
let maxW = d.canvas.width;
d.canvas.height = maxW;
let maxH = d.canvas.height;
canvasW = maxW;
d.strokeWidth = 1;
var drawUnit = (a,b,c) => {
if (c == undefined) c = 10;
d.moveTo(a,b);
if (c > 0) d.lineTo(a,b+c);
else d.lineTo(a-c,b);
d.stroke();
};
let s = 20;
for(let i=0,x=1,y=1,c=0; i<=maxW; i+=s,c++) {
d.moveTo(x,y);
d.lineTo(i,y);
if (c > 0 && c % 5 == 0) drawUnit(i,y,s);
else drawUnit(i,y,s/2);
x=i;
}
for(let i=0,x=1,y=1,c=0; i<=maxH; i+=s,c++) {
d.moveTo(x,y);
d.lineTo(x,i);
if (c > 0 && c % 5 == 0) drawUnit(x,i,0-s);
else drawUnit(x,i,0-s/2);
y=i;
}
}
$(() => {
onload();
var obj1 = $('.obj1');
var obj2 = $('.obj2');
minW = obj1.width();
minH = obj1.height();
$('form').submit(() => {
let in1 = $('#in1').val().trim().toLowerCase();
let in2 = $('#in2').val().trim().toLowerCase();
try{
let scale = 1;
let c = new RegExp('x|,|\s+');
let getAr = (v) => {
let ar;
if (/^\d+(x|,|\s+)\d+$/.test(v)==false) throw new Error('Input is Error');
if (c.test(v)) ar = v.split(c);
else if (/^\d+$/.test(v)) ar = [v,v];
else throw new Error('Input Error!');
let w = parseInt(ar[0]);
let h = parseInt(ar[1]);
if (w < minW) throw new Error(minW + ' is min width');
if (h < minH) throw new Error(minH + ' is min height');
if (w > canvasW || h > canvasW) {
let scale2 = canvasW / w;
if (scale==1 || (scale != scale2 && scale > scale2)) scale = scale2;
console.log('scale '+scale);
}
return [w,h];
};
let ar1 = getAr(in1);
let ar2 = getAr(in2);
let setAr = (ar) => {
if (scale != 1) {
let w = ar[0] * scale;
let h = ar[1] * scale;
w = w.toFixed(2);
h = h.toFixed(2);
console.log('w '+w+', h '+h);
return [w,h];
}
return ar;
};
ar1 = setAr(ar1);
ar2 = setAr(ar2);
obj1.css('width', ar1[0]+'px').css('height', ar1[1]+'px');
obj2.css('width', ar2[0]+'px').css('height', ar2[1]+'px');
}catch(e){
alert(e);
}finally{
return false;
}
});
});
window.onerror = (e) => {
alert(e);
}
<div id="app">
<div class="bg">
<div class="obj1">参照物</div>
<div class="obj2">机身</div>
<canvas id="canv"></canvas>
</div>
<div class="panel">
<form v-on:submit="submit">
<h3>参照物与机身尺寸比较</h3>
<label>参照物尺寸(mm):</label>
<input type="text" id="in1" value="325x227" required />
<hr/>
<label>机身尺寸(mm):</label>
<input type="text" id="in2" value="156x75" required />
<hr/>
<input type="submit" />
</form>
</div>
</div>
body,.bg,canvas{
position: absolute;
}
.panel,.obj1,.obj2{
position: fixed;
}
body,.bg,canvas{
left: 0;
top: 0;
right: 0;
bottom: 0;
}
canvas{
border: 1px dotted gray;
}
.bg{
background-color: floralwhite;
}
.obj1{
background: rgba(77, 100, 109, 0.6);
}
.obj2{
background: rgba(127, 202, 41, 0.6);
}
.obj1,.obj2{
padding: 20px;
box-sizing: border-box;
text-align: right;
color: white;
border: 1px solid gray;
border-radius: 10px;
}
.panel{
top: 40px;
right: 20px;
border: 1px dotted gray;
padding: 5px;
background: rgba(777, 777, 777, 0.5);
border-radius: 5px;
}