[从头学数学] 第23节 观察物体（一）

剧情提要：

[机器小伟]在[工程师阿伟]的陪同下进入练气期第三层功法的修炼，

这次要修炼的目标是[观察物体（一）]。

正剧开始：

星历2016年01月03日 10:27:02, 银河系厄尔斯星球中华帝国江南行省。

[工程师阿伟]正在和[机器小伟]一起研究怎样观察物体。



10:29:06, 考虑到以后的功法会越来越难，[工程师阿伟]送给了[机器小伟]一样礼物：一

把尺子，有了这把尺子，相信小伟在今后的修炼中必将事半功倍，更加轻松。

<span style="font-size:18px;">/**
* @usage   厘米和像素对照的尺子
* @author  mw
* @date    2016年01月03日  星期日  08:59:22
* @param
* @return
*
*/
function Ruler() {
//在分辨率1024*768, dpi = 96时，每厘米像素比率为37.8。
var pxPerCm = 37.8;
var cm10th =pxPerCm / 10;
var cm5th = pxPerCm / 5;
var cm2th = pxPerCm / 2;

//一把任意长的尺子
this.ruler = function(rulerLong, xOffset, yOffset, rotate) {
plot.save();

plot.translate(xOffset, yOffset)
.rotate(-rotate);

rulerLong = rulerLong ? rulerLong : 10;
var L = pxPerCm * rulerLong;
for (var i = 0; i <L+10; i++) {
if (i % 100 == 0) {
plot.beginPath()
.moveTo(i, 2 * pxPerCm - cm2th)
.lineTo(i, 2 * pxPerCm-cm5th)
.closePath()
.stroke();

}
else if (i % 50 == 0) {
plot.beginPath()
.moveTo(i, 2 * pxPerCm - 2 * cm5th)
.lineTo(i, 2 * pxPerCm-cm5th)
.closePath()
.stroke();

}
else if (i % 10 == 0) {
plot.beginPath()
.moveTo(i, 2 * pxPerCm - cm5th - cm10th)
.lineTo(i, 2 * pxPerCm-cm5th)
.closePath()
.stroke();
}

if (i % 100 == 0) {
if (i == 0) {
plot.fillText(i.toFixed(0), i-cm10th, 2 * pxPerCm - cm2th, 20);
}
else {
plot.fillText(i.toFixed(0), i-3*cm10th, 2 * pxPerCm - cm2th, 20);
}

}
}

var x=0, y=0, count = 0;
//cm刻度
plot.setStrokeStyle('red');
while (x <= L+10) {
plot.beginPath()
.moveTo(x, 0)
.lineTo(x, cm5th*2)
.closePath()
.stroke();

if (count < 10) {
plot.fillText(count.toFixed(0), x-cm10th, 2 * cm2th, 20);
}
else {
plot.fillText(count.toFixed(0), x-cm5th, 2 * cm2th, 20);
}
x += pxPerCm;
count++;

}

//半厘米刻度
x=0, y=0, count = 0;
plot.setStrokeStyle('#CC0000');
while (x <= L) {

if (count % 2 != 0) {
plot.beginPath()
.moveTo(x, 0)
.lineTo(x, cm5th)
.closePath()
.stroke();
}
x += cm2th;
count++;

}

//0.1cm刻度
plot.setStrokeStyle('#880000');
x=0, y=0, count = 0;

while (x <= L) {
if (count % 10 != 0 && count % 10 != 5) {
plot.beginPath()
.moveTo(x, 0)
.lineTo(x, cm10th)
.closePath()
.stroke();
}
x += cm10th;
count++;

}

x = -2 * cm5th, y=-cm5th;

plot.setLineWidth(4)
.setStrokeStyle('#FF8844');
plot.strokeRect(x, y, L + 4*cm5th, 2 * pxPerCm+cm5th);

plot.restore();

}

}</span>

阿伟给小伟演示了这把尺子的用法。

<span style="font-size:18px;">function myDraw() {
plot.init();
setPreference();

var ruler = new Ruler();

var x = 20, y = 20;
for (var i = 1; i < 5; i++) {
ruler.ruler(5*i, x, y, 0);
x-=50;
y += 100;
}

}</span>

上面一排是厘米，下面一排是像素值。



有了这把尺子，小伟轻松地看到这辆卡车1.3->7.4 = 6.1cm， 40 -> 280 = 240px的长度。



以及2.1cm, 80像素的高度。











上面图中原图已经放大了1.3倍，这个数字是推算出来的。







本节到此结束，欲知后事如何，请看下回分解。