forked from barryclark/jekyll-now
-
Notifications
You must be signed in to change notification settings - Fork 2
/
100.html
592 lines (505 loc) · 27.8 KB
/
100.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
---
layout: individual
title: 五位百法,可交互
---
<style>
/* 样式代码 */
#info {
display: none;
position: absolute;
background-color: #56e2d2;
border: 1px solid #000;
padding: 10px;
z-index: 1000;
font-size: 120%;
}
#gatha {
display: none;
position: absolute;
background-color: #a9e0da;
border: 1px solid #000;
padding: 10px;
z-index: 1000;
font-size: 120%;
}
.image-container {
position: relative; /* This makes it the reference for its absolutely positioned children */
width: 1893px; /* Set the width to match your image's width */
height: 1251px; /* Set the height to match your image's height */
}
.image-container img,
.image-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%; /* This will make them stretch to the container size */
height: 100%; /* This will make them stretch to the container size */
}
canvas {
z-index: 10; /* This ensures the canvas is above the image */
pointer-events: none; /* This allows click events to pass through the canvas */
}
</style>
<div class="image-container">
<img src="../5-categories-100-items.png" usemap="#image-map" alt="五位白法">
<map name="image-map" id="map1">
<!-- image size 1893 × 1251 (100%) -->
<area title="重置,清空注释和连接等。" href="#" coords="0,0,100,200" shape="rect" id="box_reset">
</map>
<canvas id="myCanvas" width="1893" height="1251"></canvas>
<!-- this is for debug use. -->
<!-- <canvas id="myCanvas" width="1893" height="1251" style="border:1px solid #000000;"></canvas> -->
<div id="info"></div>
<div id="gatha"></div>
</div>
<div>
<button id="btn_reset">重置图片(或点击图片左上角空白区100x200)</button> <a href="https://yuqianyi1001.github.io/">返回网站主页:https://yuqianyi1001.github.io/</a>
<p>
<b>说明:</b>
<br />1. 可交互范围:网页可放大或缩小,不影响交互能力。如有其他需求,请留言。
<br /> * 编号从1-100的方框(百法)可以用“单击”显示注释。
<br /> * 编号从1-8的方框(心王)可以用“单击”显示《八十规矩颂》对应的颂文。以及“心王”对应的“心所”。
<br />2. 原始图片来源网络(抱歉,我不知道作者是谁,有知情者,请留言告知)。原始图中的“58想”和“59思”更经常的用词是“寻”和“伺”(已通过PS修正)。
<br />3. 该网页增加了交互性,增加了注释。注释来源:《成唯识论》,和其《成唯识论直解》(林国良老师著)
<br />4. 该网页纯HTML制作,可通过源码获取。可下载至本地离线运行。转载请注明出处“愚千一 <a href="https://yuqianyi1001.github.io/100">https://yuqianyi1001.github.io/100</a> ”。
<br />
<br /> 回向:愿以此功德,普及与一切,我等及众生,皆共成佛道。
</p>
</div>
<script>
// use this tool https://www.image-map.net/
let box_coords=[
/* 1 */ [4, 450, 36, 526 ],
/* 2 */ [55, 450, 85, 526 ],
/* 3 */ [100, 450, 133, 526 ],
/* 4 */ [150, 450, 183, 526 ],
/* 5 */ [194, 450, 230, 526 ],
/* 6 */ [242, 450, 278, 526 ],
/* 7 */ [288, 450, 324, 552 ],
/* 8 */ [335, 450, 372, 578 ],
/* 9 */ [540, 411, 575, 491 ],
/* 10 */ [588, 411, 626, 468 ],
/* 11 */ [636, 411, 675, 468 ],
/* 12 */ [686, 411, 726, 468 ],
/* 13 */ [737, 411, 776, 468 ],
/* 14 */ [561, 545, 600, 602 ],
/* 15 */ [611, 545, 651, 629 ],
/* 16 */ [662, 545, 701, 602 ],
/* 17 */ [711, 545, 752, 602 ],
/* 18 */ [762, 545, 801, 602 ],
/* 19 */ [428, 666, 465, 725 ],
/* 20 */ [474, 666, 516, 750 ],
/* 21 */ [524, 666, 564, 725 ],
/* 22 */ [574, 666, 612, 726 ],
/* 23 */ [622, 668, 662, 749 ],
/* 24 */ [670, 668, 710, 749 ],
/* 25 */ [718, 668, 758, 749 ],
/* 26 */ [768, 668, 808, 749 ],
/* 27 */ [816, 668, 856, 776 ],
/* 28 */ [864, 666, 905, 751 ],
/* 29 */ [912, 666, 953, 751 ],
/* 30 */ [416,835,457,893],
/* 31 */ [464,837,505,895],
/* 32 */ [514,837,555,895],
/* 33 */ [561,837,602,895],
/* 34 */ [609,837,650,895],
/* 35 */ [657,835,702,947],
/* 36 */ [0,1043,42,1102],
/* 37 */ [48,1043,90,1102],
/* 38 */ [93,1043,135,1102],
/* 39 */ [139,1043,181,1102],
/* 40 */ [187,1043,229,1102],
/* 41 */ [231,1043,273,1102],
/* 42 */ [278,1043,320,1102],
/* 43 */ [323,1043,365,1102],
/* 44 */ [370,1043,412,1102],
/* 45 */ [415,1043,457,1102],
/* 46 */ [461,1042,502,1127],
/* 47 */ [507,1042,548,1127],
/* 48 */ [554,1042,595,1127],
/* 49 */ [600,1042,641,1127],
/* 50 */ [647,1042,688,1127],
/* 51 */ [690,1042,731,1127],
/* 52 */ [737,1042,778,1127],
/* 53 */ [784,1042,825,1127],
/* 54 */ [829,1042,870,1152],
/* 55 */ [875,1042,918,1127],
/* 56 */ [192,861,235,946],
/* 57 */ [242,861,283,945],
/* 58 */ [287,861,328,920],
/* 59 */ [334,861,375,920],
/* 60 */ [796,435,837,494],
/* 61 */ [843,433,883,492],
/* 62 */ [889,433,929,492],
/* 63 */ [934,433,974,492],
/* 64 */ [980,433,1020,492],
/* 65 */ [982,572,1022,632],
/* 66 */ [1027,572,1069,632],
/* 67 */ [1073,572,1114,632],
/* 68 */ [1119,572,1160,632],
/* 69 */ [1164,572,1205,632],
/* 70 */ [1013,796,1054,957],
/* 71 */ [1252,389,1293,452],
/* 72 */ [1304,389,1344,473],
/* 73 */ [1353,389,1393,500],
/* 74 */ [1403,389,1443,500],
/* 75 */ [1306,519,1346,630],
/* 76 */ [1355,519,1395,630],
/* 77 */ [1404,519,1444,630],
/* 78 */ [1304,671,1344,756],
/* 79 */ [1355,671,1395,756],
/* 80 */ [1404,673,1444,758],
/* 81 */ [1292,792,1331,855],
/* 82 */ [1339,792,1381,855],
/* 83 */ [1390,792,1432,855],
/* 84 */ [1439,792,1482,876],
/* 85 */ [1233,907,1276,991],
/* 86 */ [1285,907,1328,991],
/* 87 */ [1333,907,1376,991],
/* 88 */ [1384,907,1427,991],
/* 89 */ [1434,907,1477,991],
/* 90 */ [1305,1030,1344,1092],
/* 91 */ [1355,1030,1394,1092],
/* 92 */ [1405,1030,1444,1092],
/* 93 */ [1305,1114,1344,1226],
/* 94 */ [1355,1114,1396,1248],
/* 95 */ [1556,506,1595,592],
/* 96 */ [1604,506,1643,592],
/* 97 */ [1650,508,1691,619],
/* 98 */ [1698,508,1739,592],
/* 99 */ [1744,508,1786,619],
/* 100 */ [1792,508,1845,597],
]
let five_wrong_views_coords = [
[872,773,923,808],
[872,817,923,852],
[872,860,936,891],
[872,904,953,937],
[872,947,931,980]
]
let five_rupa_coords = [
[1109,917,1207,963],
[1128,998,1197,1044],
[1103,1076,1187,1122],
[1028,1111,1099,1152],
[944,1078,1015,1119]
]
let one_hundred = [
"1. 何等眼識?謂依眼,緣色,了別為性。",
"2. 何等耳識?謂依耳,緣聲,了別為性。",
"3. 何等鼻識?謂依鼻、緣香、了別為性。",
"4. 何等舌識?謂依舌,緣味,了別為性。",
"5. 何等身識?謂依身,緣觸,了別為性。",
"6. 了别名识。何等意識?謂依意、緣法、了別為性。",
"7. 思量名意。末那識譯為意。意有思量之義,此識常緣第八識之見分思量,我為法,故名末那。我法二執之根本也。",
"8. 集起名心。初能变识,大小乘教名阿赖耶,此识具有能藏、所藏、执藏义故。谓与杂染互为缘故,有情执为自内我故。此即显示初能变识所有自相,摄持因果为自相故。此识自相,分位虽多,藏初过重,是故偏说。",
"9. 作意谓能警心为性,于所缘境引心为业。谓此警觉 应起心种,引令趣境,故名作意。",
"10. 触谓三和,分别变异,令心、心所触境为性,受、想、思等所依为业。谓根、境、识更相随顺,故名三和;触依彼生,令彼和合,故说为彼。",
"11. 受谓领纳顺违俱非境相为性;起爱为业,能起合离非二欲故。",
"12. 想谓于境取像为性,施设种种名言为业。谓要安立境分齐相,方能随起种种名言。",
"13. 思谓令心造作为性,于善品等役心为业。谓能取境正因等相,驱役自心,令造善等。",
"14. 于所乐境,希望为性,勤依为业。",
"15. 于决定境,印持为性,不可引转为业。",
"16. 于曾习境,令心明记不忘为性,定依为业",
"17. 于所观境,令心专注不散为性,智依为业。",
"18. 于所观境,简择为性,断疑为业。",
"19. 于实、德、能深忍乐欲,心净为性,对治不信,乐善为业。",
"20. 勤谓精进,于善恶品修、断事中,勇悍为性,对治懈 怠,满善为业。",
"21. 依自法力,崇重贤善为性;对治无惭、止息恶行为业",
"22. 依世间力,轻拒暴恶 为性,对治无愧,止息恶行为业",
"23. 于有、有具,无著为性;对治贪著、作善为业。",
"24. 于苦、苦具,无恚为性;对治瞋恚、作善为业。 ",
"25. 于诸理、事明解为性,对治愚痴、作善为业。",
"26. 安谓轻安,远离粗重,调畅身心,堪任为性;对治昏沉,转依为业",
"27. 不放逸者,精进三根,于所断修、防修为性;对治放逸,成满一切世、出世间善事为业",
"28. 精进、三根,令心平等、正直、无功用住为 性,对治掉举,静住为业。",
"29. 于诸有情,不为损恼,无瞋为性;能对治 害,悲愍为业。",
"30. 于有、有具染著为性;能障无贪,生苦为业。谓由爱力,取蕴生故。",
"31. 于苦、苦具憎恚为性;能障无瞋,不安隐性,恶行所依为业。谓瞋必令身心热恼,起诸恶业不善性故。",
"32. 于诸理事迷暗为性;能障无痴,一切杂染所依为业。谓由无明,起疑、邪见、贪等烦恼、随烦恼、业,能招后生杂染法故。",
"33. 恃己于他高举为性;能障不慢,生苦为 业。谓若有慢,于德、有德,心不谦下,由此生死轮转无 穷,受诸苦故。",
"34. 于诸谛理,犹豫为性;能障不疑、善品为 业。谓犹豫者,善不生故。",
"35. 于诸谛理,颠倒推度,染慧为性;能障善 见,招苦为业。谓恶见者,多受苦故。",
"36. 依对现前不饶益境,愤发为性;能障不忿,执仗为业。谓怀忿者,多发暴恶身表业故。",
"37. 由忿为先,怀恶不舍,结怨为性;能障不恨,热恼为业。谓结恨者,不能含忍,恒热恼故。",
"38. 忿、恨为先,追触暴热,狠戾为性;能障不恼,蛆螯为业。谓追往恶,触现违缘,心便狠戾,多发嚣暴凶鄙粗言,蛆螫他故。",
"39. 于自作罪,恐失利誉,隐藏为性;能障不覆,悔恼为业。谓覆罪者,后必悔恼,不安隐故。",
"40. 为获利誉,疑现有德,诡诈为性,能障不诳,邪命为业。谓矫诳者,心怀异谋,多现不实邪命事故。",
"41. 为罔他故,矫设异仪,险曲为性;能障不谄,教诲为业。谓谄曲者,为网眉他,曲顺时宜,矫设 方便,为取他意;或藏己失,不任师友正教诲故。",
"42. 于自盛事,深生染著,醉傲为性;能障不懦,染依为业。谓懦醉者,生长一切杂染法故。",
"43. 于诸有情,心无悲愍,损恼为性;能障不害,逼恼为业。谓有害者,逼恼他故。",
"44. 殉自名利,不耐他荣,妒忌为性;能障不嫉,忧戚为业。谓嫉妒者,闻见他荣,深怀忧戚,不安隐故。",
"45. 耽著财法,不能惠舍,秘吝为性;能障不悭,鄙畜为业。谓悭吝者,心多鄙涩,畜积财法,不能舍故。",
"46. 不顾自、法,轻拒贤善为性;能障碍惭,生长恶行为业。谓于自法无所顾者,轻拒贤善,不耻过恶,障惭,生长诸恶行故。",
"47. 不顾世间,崇重暴恶为性;能障碍愧,生长恶行为业。谓于世间无所顾者,崇重暴恶,不耻过罪,障愧,生长诸恶行故。",
"48. 于实、德、能不忍乐欲,心秽为性;能障净信,情依为业。谓不信者,多懈怠故。",
"49. 于善、恶品修、断事中懒惰为性;能障精进,增染为业。谓懈怠者,滋长染故。",
"50. 于染净品不能防修,纵荡为性;障不放逸,增恶损善所依为业。谓由懈怠及贪、瞋、痴,不能防修染净品法,总名放逸,非别有体",
"51. 令心于境无堪任为性,能障轻安、毗钵舍那为业。",
"52. 令心于境不寂静为性,能障行舍、奢摩他为业。",
"53. 于诸所缘不能明记为性;能障正念,散乱所依为业。一谓失念者,心散乱故。",
"54. 于所观境,谬解为性;能障正知,毁犯为业。谓不正知者,多所毁犯故。",
"55. 于诸所缘,令心流荡为性;能障正定,恶慧所依为业。谓散乱者,发恶慧故。",
"56. 眠谓睡眠,令身不自在,昧略为性;障观为业。谓睡眠位,身不自在,心极暗劣,一门转故。",
"57. 悔谓恶作,恶所作业,追悔为性;障止为业。",
"58. 寻谓寻求,令心匆遽,于意言境粗转为性。",
"59. 伺谓伺察,令心匆遽,于意言境,细转为性。",
"60. 眼根,〔即视觉机制〕",
"61. 耳根,〔即听觉机制〕",
"62. 鼻根,〔即嗅觉机制〕",
"63. 舌根,〔即味觉机制〕",
"64. 身根,〔即触觉机制〕",
"65. 色境,〔即颜色等一切视觉对象〕",
"66. 声境,〔即声音等一切听觉对象〕",
"67. 香境,〔即气味等一切嗅觉对象〕",
"68. 味境,〔即味道等一切味觉对象〕",
"69. 触境,〔即身体直接接触到的一切触觉对象〕",
"70. 包括极略色、极迥色、受所引色、遍计所起色、自在所生色五种。",
"71. 一是得,就是获得,或是形成、成就。",
"72. 二是命根,就是众生的寿命。",
"73. 三是众同分,即六道各类众生的共性。",
"74. 四是异生性,即凡夫性。",
"75. 五是无想定,这是外道所入的无心定。",
"76. 六是灭尽定,这是圣者所入的无心定,能得此定的有:声闻乘中第三果位以上的圣者、独觉、八地以上菩萨和如来。",
"77. 七是无想报,也称无想天,无想异熟。此无想天在色界四禅 中,是修习无想定者所得的果报。",
"78. “名”指名称、名词,能诠释事物 的自身性质",
"79. “句”是句子,能表明事物的差异、区别",
"80. “文”指字母、文字(当时主要指梵文字母),是构成名词和句子的基础",
"81. 本无今有,即产生、形成,称为“生”",
"82. 处于相对稳定期,称为“住”",
"83. 续变异衰 败,称为“老”",
"84. 连续变坏,称为“无常”",
"85. 指前因后果连续不断",
"86. 指不同的因产生不同的果,因果类型有种种差别",
"87. 指因果相称,互相顺应",
"88. 因果的飞速流转",
"89. 指因果相生有一定的顺序,如业力强的先生,业力弱的后生,没有同一时间有二果同时生起的情况",
"90. 即时间,由因果相续而假立过去、现在、未来",
"91. 即方位、空间,由物质现象的因果相续,而有东南西北上下的差别。非物质现象则无方的含义。",
"92. 即数目,指一切事物有数量上的差别。",
"93. 指各种条件的聚集会合,所谓众缘和合,方能形成一切事物",
"94. 指形成各种事物的条件 不能聚集会合",
"95. 虚空无为是真如的表现,真如是显现空无的真理,真理寂灭,脱离各种障碍,犹如虚空。以比喻得名,称虚空无为。",
"96. “择”是简择,即判断、选择。“灭”是断障。“择灭无为''就是由无漏智熹的力量,断灭一切烦恼,证得真如。",
"97. 有二种非择灭无为:一是并非由智慧力量的判断选择,而是因为诸法本性清净所显的寂灭。二是缺缘不生所显的真如",
"98. 色界四禅以上,苦受和乐受都消失。苦乐受的性质是动转,脱离了苦乐受的动转性所显的真如,就是不动无为。",
"99. 由想受灭所显的真如,称为想受灭无为。",
"100. 真如是一切事物的真实本性,“真”即真实,“如”即如常,也就是始终不变的本性。",
]
let five_wrong_views = [
"萨迦耶见(身见),谓于五取蕴执我、我所,一切见趣所依为业。",
"边执见,谓即于彼,随执断、常,障处中行、出离为业。",
"见取,谓于诸见及所依蕴,执为最胜,能得清净。一切斗诤所依为业。",
"戒禁取,谓于随顺诸见戒禁及所依蕴,执为最胜,能得清净。无利勤苦所依为业。",
"邪见,谓谤因果、作用、实事及非四见诸余邪执,如增上缘,名义遍故。",
]
let five_rupa = [
"遍计所起色:指由遍计所执而形成的影像,如由幻觉等",
"定果色(又称自在所生色):即由定力所产生的色、声、香、味、融等境色。",
"受所引色:就是无表色,有三种。(a)律仪无表。由受戒后善的愿力 熏成思心所的种子,这善的思种子就称为律仪无表。(b)不律仪无表,指由不善的愿力熏成的思种 子。(c)非律仪非不律仪无表,如行为属非善非恶的,就称为非律 仪非不律仪业。但就思种子而言,总是或善或恶。",
"极迥色:分析虚空的明暗等无质的色至极微,称为极迥色。",
"极略色:分析五根、五境等有质的实色至极微(最小单位),就是极略色。",
]
let gatha = [
"前五识颂:<br/>"+
"性境现量通三性,眼耳身三二地居,遍行别境善十一,中二大八贪嗔痴。"+
"五识同依净色根,九缘七八好相邻,合三离二观尘世,愚者难分识与根。"+
"变相观空唯后得,果中犹自不诠真,圆明初发成无漏,三类分身息苦轮。",
"第六识颂:<br/>"+
"三性三量通三境,三界轮时易可知,相应心所五十一,善恶临时分配之。"+
"性界受三恒转易,根随信等总相连,动身发语独为最,引满能招业力牵。"+
"发起初心欢喜地,俱生犹自现缠眠,远行地后纯无漏,观察圆明照大千。",
"第七识颂:<br/>"+
"带质有覆通情本,随缘执我量为非,八大遍行别境慧,贪痴我见慢相随。"+
"恒审思量我相随,有情日夜镇昏迷,四惑八大相应起,六转呼为染净依。"+
"极喜初心平等性,无功用行我恒摧,如来现起他受用,十地菩萨所被机。",
"第八识颂:<br/>"+
"性唯无覆五遍行,界地随他业力生,二乘不了因迷执,由此能兴论主诤。"+
"浩浩三藏不可穷,渊深七浪境为风,受薰持种根身器,去后来先作主公。"+
"不动地前才舍藏,金刚道后异熟空,大圆无垢同时发,普照十方尘刹中。",
]
let infoDiv = document.getElementById('info');
let gathaDiv = document.getElementById('gatha');
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
function reset(){
infoDiv.style.display = 'none';
gathaDiv.style.display = 'none';
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function createAreaForOthers(coords, index, comments) {
var area = document.createElement('area');
area.alt = "Box " + (index + 1);
area.title = "Box " + (index + 1);
area.href = "#"; // or "javascript:void(0);" if you don't want it to link anywhere
area.coords = coords.join(",");
area.shape = 'rect';
area.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
reset();
var x1 = Number(this.coords.split(",")[0])
var y1 = Number(this.coords.split(",")[1])
var x2 = Number(this.coords.split(",")[2])
var y2 = Number(this.coords.split(",")[3])
// 显示百法注解 - 5个不正见。
infoDiv.innerHTML = comments[index].replace(/。/g, "。<br/>");
// Note: index = box number - 1
infoDiv.style.left = (x1 + 80) + 'px'; //event.pageX + 'px';
infoDiv.style.top = y1 + 'px' //event.pageY + 'px';
infoDiv.style.display = 'block';
});
return area;
}
function drawLine(x1,y1,x2,y2) { // not in use yet.
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.stroke();
}
function drawRect(coordinate) {
ctx.beginPath();
let x1 = coordinate[0];
let y1 = coordinate[1];
let w = coordinate[2] - coordinate[0];
let h = coordinate[3] - coordinate[1];
ctx.rect(x1,y1,w,h);
ctx.strokeStyle = "orange";
ctx.lineWidth = 4;
ctx.stroke();
}
function range(start, end) {
let result = [];
for (let i = start; i <= end; i++) {
result.push(i);
}
return result;
}
function createRelations(indexVijnana) {
// see the map: https://github.com/yuqianyi1001/citta2/blob/main/citta2/ViewController.swift
if (indexVijnana == 7){
// 第八识
for (let i = 8; i <= 12; i++) { // 遍行
drawRect(box_coords[i]);
}
} else if (indexVijnana == 6) {
// 第七识
let cittas = range(8, 12) // 遍行
.concat(range(18, 28)) // 善十一
.concat(range(47, 54)) // 八大
.concat([17, 29, 31, 32, 34]) // 别境慧, 4个根本
;
cittas.forEach(function(i, iii){
drawRect(box_coords[i]);
});
} else if (indexVijnana == 5) {
// 第六识
let cittas = range(8, 58);
cittas.forEach(function(i, iii){
drawRect(box_coords[i]);
});
} else {
// 前五识
let cittas = range(8, 31)
.concat(range(45, 54))
;
cittas.forEach(function(i, iii){
drawRect(box_coords[i]);
});
}
}
function createArea(coords, index) {
var area = document.createElement('area');
area.alt = "Box " + (index + 1);
area.title = "Box " + (index + 1);
area.href = "#"; // or "javascript:void(0);" if you don't want it to link anywhere
area.coords = coords.join(",");
area.shape = 'rect';
area.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
reset();
var x1 = Number(this.coords.split(",")[0])
var y1 = Number(this.coords.split(",")[1])
var x2 = Number(this.coords.split(",")[2])
var y2 = Number(this.coords.split(",")[3])
// 显示百法注解。
infoDiv.innerHTML = one_hundred[index].replace(/。/g, "。<br/>");
// Note: index = box number - 1
if ([94,95,96,97,98,99].includes(index)) {
infoDiv.style.left = (x1 - 300) + 'px'; //event.pageX + 'px';
infoDiv.style.top = (y2 + 4) + 'px' //event.pageY + 'px';
} else if ([92,93].includes(index)) {
infoDiv.style.left = (x1 + 3) + 'px'; //event.pageX + 'px';
infoDiv.style.top = (y1 - 100) + 'px' //event.pageY + 'px';
} else {
infoDiv.style.left = (x1 + 3) + 'px'; //event.pageX + 'px';
infoDiv.style.top = (y2 + 4) + 'px' //event.pageY + 'px';
}
infoDiv.style.display = 'block';
// 显示《八十规矩颂》。
if (index <=7 ){
if (index == 7) {
// 第八识
gathaDiv.innerHTML = gatha[3].replace(/。/g, "。<br/>");
} else if (index == 6) {
gathaDiv.innerHTML = gatha[2].replace(/。/g, "。<br/>");;
} else if (index == 5) {
gathaDiv.innerHTML = gatha[1].replace(/。/g, "。<br/>");;
} else {
gathaDiv.innerHTML = gatha[0].replace(/。/g, "。<br/>");;
}
createRelations(index);
// override the infoDiv.
infoDiv.style.left = "3px";
infoDiv.style.width = "300px";
gathaDiv.style.left = "3px"; //(x1 + 7) + 'px'; //event.pageX + 'px';
gathaDiv.style.top = "200px"; //(y1 - 200) + 'px' //event.pageY + 'px';
gathaDiv.style.display = 'block';
}
});
return area;
}
document.addEventListener('DOMContentLoaded', function () {
let map = document.getElementById('map1');
box_coords.forEach(function(coords, index) {
map.appendChild(createArea(coords, index));
});
five_wrong_views_coords.forEach(function(coords, index) {
map.appendChild(createAreaForOthers(coords, index, five_wrong_views));
});
five_rupa_coords.forEach(function(coords, index) {
map.appendChild(createAreaForOthers(coords, index, five_rupa));
});
document.getElementById('box_reset').addEventListener('click', reset);
document.getElementById('btn_reset').addEventListener('click', reset);
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('event', 'page_view', {
page_title: '五位百法,可交互 - 愚千一',
page_location: 'https://yuqianyi1001.github.io/100',
send_to: 'G-MSNV5ELZQX'
});
gtag('config', 'G-MSNV5ELZQX');
</script>
<!-- add discussion -->
<script src="https://giscus.app/client.js"
data-repo="yuqianyi1001/yuqianyi1001.github.io"
data-repo-id="R_kgDOHS6PyA"
data-category="General"
data-category-id="DIC_kwDOHS6PyM4Ccf2r"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="zh-CN"
crossorigin="anonymous"
async></script>