-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
10350 lines (9517 loc) · 507 KB
/
atom.xml
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
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[youfei's blog]]></title>
<subtitle><![CDATA[Good good study]]></subtitle>
<link href="/atom.xml" rel="self"/>
<link href="http://youfei.github.io/"/>
<updated>2014-03-17T08:45:14.664Z</updated>
<id>http://youfei.github.io/</id>
<author>
<name><![CDATA[fei you]]></name>
<email><![CDATA[[email protected]]]></email>
</author>
<generator uri="http://zespia.tw/hexo/">Hexo</generator>
<entry>
<title><![CDATA[scala看看]]></title>
<link href="http://youfei.github.io/2014/03/17/scala-g-1/"/>
<id>http://youfei.github.io/2014/03/17/scala-g-1/</id>
<published>2014-03-17T01:45:17.000Z</published>
<updated>2014-03-17T08:44:46.000Z</updated>
<content type="html"><![CDATA[<p>Scala地看看,记点小Tips</p>
<a id="more"></a>
<h4 id="until-to">until & to</h4>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="number">1</span> scala> <span class="keyword">for</span> (i <- <span class="number">0</span> <span class="keyword">until</span> <span class="number">2</span>) println(<span class="string">"Hello"</span>)<span class="comment"> //<2</span>
Hello
Hello
<span class="number">2</span> scala> <span class="keyword">for</span> (i <- <span class="number">0</span> <span class="built_in">to</span> <span class="number">2</span>) println(<span class="string">"Hello"</span>)<span class="comment"> //<=2</span>
Hello
Hello
Hello
</pre></td></tr></table></figure>
<h4 id="-">函数套函数</h4>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="number">3</span> def <span class="built_in">add</span>(more:Int) = (x:Int)=> x+more
val <span class="keyword">int1</span> = <span class="built_in">add</span>(<span class="number">1</span>) <span class="comment"> // init more = 1</span>
<span class="keyword">int1</span>(<span class="number">10</span>) <span class="comment"> // will call function x+1 = 11</span>
</pre></td></tr></table></figure>
<h4 id="_-">_*</h4>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre><span class="number">4</span> <span class="function"><span class="keyword">def</span> </span>echo(args <span class="symbol">:String*</span>) = <span class="keyword">for</span>(arg->args) println(arg)
val arr = <span class="constant">Array</span>(<span class="string">"what's"</span>, <span class="string">"up"</span>, <span class="string">"doc?"</span>)
echo(<span class="symbol">arr:</span><span class="number">_</span>*)
what<span class="string">'s
up
doc?</span>
</pre></td></tr></table></figure>
<h4 id="highrt-order-function">Highrt Order function</h4>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre><span class="number">5</span> 高阶函数:higher-order-<span class="function"><span class="keyword">function</span> 带其他函数做参数的函数
<span class="title">def</span> <span class="title">filesMatching</span><span class="params">(query:<span class="keyword">String</span>, matcher:(<span class="keyword">String</span>, <span class="keyword">String</span>)</span>=> <span class="title">Boolean</span>) =<span class="comment">{ // matcher:(String, String)=> Boolean
for(file <- filesHere; if matcher(file.getName, query)) yield file // matcher(file.getName, query)
}</span>
<span class="title">def</span> <span class="title">filesEnding</span><span class="params">(query:<span class="keyword">String</span>)</span> = <span class="title">filesMatching</span><span class="params">(query, _.endWith(_)</span>)
<span class="title">def</span> <span class="title">filesContaining</span><span class="params">(query:<span class="keyword">String</span>)</span> = <span class="title">filesMatching</span><span class="params">(query, _.contains(_)</span>)
<span class="title">def</span> <span class="title">filesRegex</span><span class="params">(query:<span class="keyword">String</span>)</span> = <span class="title">filesMatching</span><span class="params">(query, _.matches(_)</span>)</span>
</pre></td></tr></table></figure>
<h4 id="curry">Curry</h4>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre>6 Curry化
柯里化声称“如果你固定某些参数,你将得到接受余下参数的一个函数”。所以对于有两个变量的函数y^x,如果固定了 y=2,则得到有一个变量的函数 2^x
def first(x:Int) = (y:Int) => x+y
first: (Int)(Int) => Int
def twice(op: Int => Int, x:Int) = op(op(x)) //高阶函数
<span class="header">twice(_ + 1, 5)
===</span>
op(x) = x + 1
|
<span class="header">op(op(x))
===</span>
</pre></td></tr></table></figure>
<h4 id="-">读书笔记</h4>
<blockquote>
<p><strong>貸出模式</strong> Loan Pattern</br>
该模式大概说: 对于那些资源密集型(resource-intensive)对象应使用这一模式</br>
既然是资源密集在一个对象中,那么用户代码就不能一直保持获得所有资源,而应该在需要时就向资源供给方进行借贷,使用完后应立即归还。</p>
<p><strong>脆基类</strong></br>
派生类对基类有十分紧密的耦合,同时这个闭合的连接是不受欢迎的。设计师们因此给这种行为起了一个绰号——“脆基类问题”。基类是被认为十分脆弱的,因为你可以通过一个表面上十分安全的方法修改一个基类,但这个新的行为,当被派生类继承的时候,可能会造成派生类运行出错。你不能简单孤立地通过检查基类的方法来判断你对基类的改变是不是安全;你也必须查看(并测试)所有的派生类。此外,你必须检查所有+同时使用了基类和派生类对象的代码,因为这些代码可能会被新的行为所破坏。对关键的基类的小小的改变都会导致整个程序无法运行。&oq=派生类对基类有十分紧密的耦合,同时这个闭合的连接是不受欢迎的。设计师们因此给这种行为起了一个绰号——“脆基类问题”。基类是被认为十分脆弱的,因为你可以通过一个表面上十分安全的方法修改一个基类,但这个新的行为,当被派生类继承的时候,可能会造成派生类运行出错。你不能简单孤立地通过检查基类的方法来判断你对基类的改变是不是安全;你也必须查看(并测试)所有的派生类。此外,你必须检查所有+同时使用了基类和派生类对象的代码,因为这些代码可能会被新的行为所破坏。对关键的基类的小小的改变都会导致整个程序无法运行。</p>
<p><strong>object看成是特殊的class,可以认为他是class的单例</strong></p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre>===
Any
|
class
|
<span class="header">Nothing/Null
===</span>
</pre></td></tr></table></figure>
<p><strong>Scala类层次结构</strong>
<img src="http://images.51cto.com/files/uploadimg/20090806/141440204.jpg" alt=""></p>
<p><strong>trait</strong> 有点抽象接口的意思</p>
</blockquote>
]]></content>
<summary type="html"><![CDATA[<p>Scala地看看,记点小Tips</p>
]]></summary>
<category term="scala" scheme="http://youfei.github.io/tags/scala/"/>
<category term="scala" scheme="http://youfei.github.io/categories/scala/"/>
</entry>
<entry>
<title><![CDATA[领域驱动设计]]></title>
<link href="http://youfei.github.io/2014/03/14/design-1/"/>
<id>http://youfei.github.io/2014/03/14/design-1/</id>
<published>2014-03-14T08:01:46.000Z</published>
<updated>2014-03-17T08:29:46.000Z</updated>
<content type="html"><![CDATA[<p>读文章<<<a href="http://www.jdon.com/ddd.html" target="_blank">领域驱动设计(DDD:Domain-Driven Design)</a>>> </br>
Eric Evans的“Domain-Driven Design领域驱动设计”简称<strong>DDD</strong></p>
<a id="more"></a>
<h1 id="-">服务器后端发展三个阶段</h1>
<p><img src="http://www.jdon.com/img/uploadShowAction.shtml?id=23140&oid=23142654" alt=""></p>
<ul>
<li><p>UI+DataBase的两层架构,这种面向数据库的架构(上图table module )没有灵活性。</p>
</li>
<li><p>UI+Service+DataBase的多层SOA架构,这种服务+表模型的架构易使服务变得囊肿,难于维护拓展,伸缩性能差,见这里讨论或Spring Web 应用的最大败笔.<a href="http://www.jdon.com/45857" target="_blank">The Biggest Flaw of Spring Web Applications | Java</a> 真是败笔吗? I do not think so.</p>
</li>
<li><p>DDD+SOA的事件驱动的CQRS读写分离架构,应付复杂业务逻辑,以聚合模型替代数据表模型,以并发的事件驱动替代串联的消息驱动。真正实现以业务实体为核心的灵活拓展。</p>
</li>
</ul>
<h1 id="-">四个编程模型</h1>
<p><strong>失血模型</strong> </br>
失血模型简单来说,就是domain object只有属性的getter/setter方法的纯数据类,所有的业务逻辑完全由business object来完成(又称
TransactionScript),这种模型下的domain object被Martin Fowler称之为“贫血的domain object”。</p>
<p><strong>贫血模型</strong> </br>
简单来说,就是domain ojbect包含了不依赖于持久化的领域逻辑,而那些依赖持久化的领域逻辑被分离到Service层。
Service(业务逻辑,事务封装) --> DAO ---> domain object </p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre>这种模型的优点:
<span class="number">1</span>、各层单向依赖,结构清楚,易于实现和维护
<span class="number">2</span>、设计简单易行,底层模型非常稳定
这种模型的缺点:
<span class="number">1</span>、domain <span class="keyword">object</span>的部分比较紧密依赖的持久化domain logic被分离到Service层,显得不够OO
<span class="number">2</span>、Service层过于厚重
</pre></td></tr></table></figure>
<p><strong>充血模型</strong> </br>
充血模型和第二种模型差不多,所不同的就是如何划分业务逻辑,即认为,绝大多业务逻辑都应该被放在domain object里面(包括持久化逻辑)
,而Service层应该是很薄的一层,仅仅封装事务和少量逻辑,不和DAO层打交道。
Service(事务封装) ---> domain object <---> DAO </p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre>这种模型的优点:
<span class="number">1</span>、更加符合OO的原则
<span class="number">2</span>、Service层很薄,只充当Facade的角色,不和DAO打交道。
这种模型的缺点:
<span class="number">1</span>、DAO和domain object形成了双向依赖,复杂的双向依赖会导致很多潜在的问题。
<span class="number">2</span>、如何划分Service层逻辑和domain层逻辑是非常含混的,在实际项目中,由于设计和开发人员的水平差异,可能导致整个结构的混乱无序。
<span class="number">3</span>、考虑到Service层的事务封装特性,Service层必须对所有的domain object的逻辑提供相应的事务封装方法,其结果就是Service完全重定义
一遍所有的domain logic,非常烦琐,而且Service的事务化封装其意义就等于把OO的domain logic转换为过程的Service TransactionScript
。该充血模型辛辛苦苦在domain层实现的OO在Service层又变成了过程式,对于Web层程序员的角度来看,和贫血模型没有什么区别了。
<span class="number">1.</span>事务我是不希望由<span class="keyword">Item</span>管理的,而是由容器或更高一层的业务类来管理。
<span class="number">2.</span>如果<span class="keyword">Item</span>不脱离持久层的管理,如JDO的pm,那么itemDao.update(this); 是不需要的,也就是说<span class="keyword">Item</span>是在事务过程中从数据库拿出来的,并
且声明周期不超出当前事务的范围。
<span class="number">3.</span>如果<span class="keyword">Item</span>是脱离持久层,也就是在<span class="keyword">Item</span>的生命周期超出了事务的范围,那就要必须显示调用update或attach之类的持久化方法的,这种时候
就应该是按robbin所说的第<span class="number">2</span>种模型来做。
</pre></td></tr></table></figure>
<p><strong>胀血模型</strong> </br>
基于充血模型的第三个缺点,有同学提出,干脆取消Service层,只剩下domain object和DAO两层,在domain object的domain logic上面封装
事务。
domain object(事务封装,业务逻辑) <---> DAO
似乎ruby on rails就是这种模型,他甚至把domain object和DAO都合并了。
该模型优点:
1、简化了分层
2、也算符合OO
该模型缺点:
1、很多不是domain logic的service逻辑也被强行放入domain object ,引起了domain ojbect模型的不稳定
2、domain object暴露给web层过多的信息,可能引起意想不到的副作用。 </p>
<blockquote>
<p>个人认为
失血是Hibernate的流行引起的,数据逻辑被分在Dao/imple 层实现</br>
贫血恰恰就是Spring frame的经典MVC,现在在web开发中还是很好的,不够OO?这都不是个事。</br>
充血、胀血没有概念,不过没有看出明显的好处,反而感觉这样做的话,逻辑会很混乱,对于指令编程体系来说,这可不是个好消息。</br>
So,首选还是贫血。至少现在是这么认为的。</p>
</blockquote>
<p>DDD 属于充血模型</p>
<p>DDD最大的好处是:接触到需求第一步就是考虑领域模型,而不是将其切割成数据和行为,然后数据用数据库实现,行为使用服务实现,最后造成需求的首肢分离。DDD让你首先考虑的是业务语言,而不是数据。重点不同导致编程世界观不同。</p>
<p>DDD在软件生产流程中定位i如下图,DDD落地实现离不开in-memory缓存、 CQRS、 DCI、 EDA或Event Source几大大相关领域。</p>
<h1 id="-">四种程序架构</h1>
<ul>
<li>Clean架构</li>
</ul>
<p>外圈的层次可以依赖内层,反之不可以,内圈核心的实体代表业务,不可以依赖其所处的技术环境
<img src="http://blog.8thlight.com/uncle-bob/images/2012-08-13-the-clean-architecture/CleanArchitecture.jpg" alt=""></p>
<ul>
<li>DCI架构</li>
</ul>
<p><a href="http://www.artima.com/articles/dci_vision.html" target="_blank">DCI</a> (<a href="http://www.jdon.com/37976" target="_blank">http://www.jdon.com/37976</a>) </br>
DCI是数据Data 场景Context 交互Interactions的简称,DCI是一种特别关注行为的模式(可以对应GoF行为模式),而MVC模式是一种结构性模式,MVC模式由于结构化,而可能忽视了行为事件。DCI Architecture是将“是什么”和“做什么”进行分离,然后根据需求在不同场景动态结合,还是桥模式的味道。
<img src="http://www.artima.com/images/dci/Figure2.jpg" alt=""></p>
<ul>
<li>DDD/CQRS 领域驱动设计</li>
</ul>
<p><a href="http://prezi.com/akrfq7jyau8w/ddd-cqrs-leaven-v20/" target="_blank">DDD/CQRS</a>, <a href="http://www.jdon.com/cqrs.html" target="_blank">CQES</a> </br></p>
<p>CQRS: 命令查询的责任分离Command Query Responsibility Segregation (简称CQRS)模式是一种架构体系模式,能够使改变模型的状态的命令和模型状态的查询实现分离。这属于DDD应用领域的一个模式,主要解决DDD在数据库报表输出上处理方式。
<img src="http://www.jdon.com/jdonframework/jivejdon3/images/cqrs.png" alt=""></p>
<ul>
<li>六边形架构</li>
</ul>
<p>允许应用程序都是由用户,程序,自动化测试或批处理脚本驱动的,在<strong>事件驱动</strong>和数据库环境下被开发和隔离测试。一个事件从外面世界到达一个端口,特定技术的适配器将其转换成可用的程序调用或消息,并将其传递给应用程序。该应用程序是可以无需了解输入设备的性质(调用者是哪个)。当应用程序有结果需要发出时,它会通过一个端口适配器发送它,这个适配器会创建接收技术(人类或自动)所需的相应信号。该应用程序与在它各方面的适配器形成语义良性互动,但是实际上不知道适配器的另一端的谁在处理任务。
<img src="http://alistair.cockburn.us/get/2301" alt=""></p>
<blockquote>
<p>心得: 看的头痛!!!</p>
</blockquote>
]]></content>
<summary type="html"><![CDATA[<p>读文章<<<a href="http://www.jdon.com/ddd.html" target="_blank">领域驱动设计(DDD:Domain-Driven Design)</a>>> </br>
Eric Evans的“Domain-Driven Design领域驱动设计”简称<strong>DDD</strong></p>
]]></summary>
<category term="Design" scheme="http://youfei.github.io/tags/Design/"/>
<category term="Design" scheme="http://youfei.github.io/categories/Design/"/>
</entry>
<entry>
<title><![CDATA[svg]]></title>
<link href="http://youfei.github.io/2014/03/12/svg-g-1/"/>
<id>http://youfei.github.io/2014/03/12/svg-g-1/</id>
<published>2014-03-12T03:03:30.000Z</published>
<updated>2014-03-17T08:35:43.000Z</updated>
<content type="html"><![CDATA[<p><strong>可缩放矢量图形(Scalable Vector Graphics,简称SVG)</strong>是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 </p>
<a id="more"></a>
<p><strong>SVG允许三种类型的图形对象:</strong></p>
<pre><code>- 矢量图形形状(例如由直线和曲线组成的路径)、
- 图像
- 文本。
</code></pre><p>可以将图形对象(包括文本)分组、样式化、转换和组合到以前呈现的对象中。
SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。
SVG绘图是交互式和动态的。 例如,可使用脚本来定义和触发动画。这一点与Flash相比很强大。Flash是二进制文件,动态创建和修改都比较困难。而SVG是文本文件,动态操作是相当容易的。而且,SVG直接提供了完成动画的相关元素,操作起来非常方便。
<strong>SVG VS Canvas</strong>
SVG与其他Web标准兼容,并直接支持文档对象模型DOM。这一点也是与HTML5中的canvas相比很强大的地方。
这里注意, SVG内部也是用一个类似的canvas这样的东西来展示SVG图形,
到后面你会发现很多特性和HTML5的canvas还有点像;文中如果没明确说明是SVG的canvas的话,都代指HTML5中的canvas元素。因而,可以很方便的使用脚本实现SVG的很多高级应用。而且SVG的图形元素基本上都支持DOM中的标准事件。可将大量事件处理程序(如“onmouseover”和“onclick”)分配给任何SVG图形对象。 虽然SVG的渲染速度比不上canvas元素,但是胜在DOM操作很灵活,这个优势完全可以弥补速度上的劣势。</p>
<p><strong>特点</strong>
• SVG文件是纯粹的XML, 可被非常多的工具读取和修改(比如记事本)。
• SVG 与JPEG 和GIF图像比起来,尺寸更小,且可压缩性更强。
• SVG 是可伸缩的,可在图像质量不下降的情况下被放大,可在任何的分辨率下被高质量地打印。
• SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。
• SVG 可以与 Java 技术一起运行。
• SVG 是开放的标准。</p>
<p><strong>Browser</strong>
IE9+, 可以在HTML 中直接运行</p>
<p><strong>渲染顺序</strong>
从前到后</p>
<blockquote>
<p>SVG是以XML定义的,所以是大小写敏感的,这点与HTML不一样.</p>
</blockquote>
<h1 id="2d-">2D图形绘制</h1>
<p><a href="http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html" target="_blank">http://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html</a></p>
<h2 id="-">基本图形</h2>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"250"</span>></span>
<span class="tag"><<span class="title">rect</span> <span class="attribute">x</span>=<span class="value">"10"</span> <span class="attribute">y</span>=<span class="value">"10"</span> <span class="attribute">width</span>=<span class="value">"30"</span> <span class="attribute">height</span>=<span class="value">"30"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">rect</span> <span class="attribute">x</span>=<span class="value">"60"</span> <span class="attribute">y</span>=<span class="value">"10"</span> <span class="attribute">rx</span>=<span class="value">"10"</span> <span class="attribute">ry</span>=<span class="value">"10"</span> <span class="attribute">width</span>=<span class="value">"30"</span> <span class="attribute">height</span>=<span class="value">"30"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">circle</span> <span class="attribute">cx</span>=<span class="value">"25"</span> <span class="attribute">cy</span>=<span class="value">"75"</span> <span class="attribute">r</span>=<span class="value">"20"</span> <span class="attribute">stroke</span>=<span class="value">"red"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">ellipse</span> <span class="attribute">cx</span>=<span class="value">"75"</span> <span class="attribute">cy</span>=<span class="value">"75"</span> <span class="attribute">rx</span>=<span class="value">"20"</span> <span class="attribute">ry</span>=<span class="value">"5"</span> <span class="attribute">stroke</span>=<span class="value">"red"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">line</span> <span class="attribute">x1</span>=<span class="value">"10"</span> <span class="attribute">x2</span>=<span class="value">"50"</span> <span class="attribute">y1</span>=<span class="value">"110"</span> <span class="attribute">y2</span>=<span class="value">"150"</span> <span class="attribute">stroke</span>=<span class="value">"orange"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">polyline</span> <span class="attribute">points</span>=<span class="value">"60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"</span>
<span class="attribute">stroke</span>=<span class="value">"orange"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">polygon</span> <span class="attribute">points</span>=<span class="value">"50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"</span>
<span class="attribute">stroke</span>=<span class="value">"green"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M20,230 Q40,205 50,230 T90,230"</span> <span class="attribute">fill</span>=<span class="value">"none"</span> <span class="attribute">stroke</span>=<span class="value">"blue"</span> <span class="attribute">stroke-width</span>=<span class="value">"5"</span>/></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p><strong>矩形 - rect元素</strong>
x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形高度。
rx:实现圆角效果时,圆角沿x轴的半径。
ry:实现圆角效果时,圆角沿y轴的半径。</p>
<p><strong>圆 - circle元素</strong>
r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。</p>
<p><strong>椭圆 - ellipse元素</strong>
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。</p>
<p><strong>直线 - line元素</strong>
x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。</p>
<p><strong>折线 - polyline元素</strong>
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。</p>
<p><strong>多边形 - polygon元素</strong>
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"</p>
<p><strong>路径 - path元素</strong>
这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。这个元素控制位置和形状的只有一个参数
d:一系列绘制指令和绘制参数(点)组合成。
绘制指令分为绝对坐标指令和相对坐标指令两种,这两种指令使用的字母是一样的,就是大小写不一样,绝对指令使用大写字母,坐标也是绝对坐标;相对指令使用对应的小写字母,点的坐标表示的都是偏移量。</p>
<blockquote>
<p>绝对坐标绘制指令</p>
</blockquote>
<p>这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre>指令 参数 说明
M x, y 将画笔移动到点(x,y)
L x y 画笔从当前的点绘制线段到点(x,y)
H x 画笔从当前的点绘制水平线段到点(x,y0)
V y 画笔从当前的点绘制竖直线段到点(x0,y)
A <span class="literal">rx</span> ry x<span class="attribute">-axis</span><span class="attribute">-rotation</span> large<span class="attribute">-arc</span><span class="attribute">-flag</span> sweep<span class="attribute">-flag</span> x y 画笔从当前的点绘制一段圆弧到点(x,y)
C x1 y1, x2 y2, x y 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S x2 y2, x y 特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q x1 y1, x y 绘制二次贝塞尔曲线到点(x,y)
T x y 特殊版本的二次贝塞尔曲线(省略控制点)
Z 无参数 绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。
</pre></td></tr></table></figure>
<p>移动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单
<strong>绘制圆弧指令:A rx ry x-axis-rotation large-arc-flag sweep-flag x y</strong>
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span> <span class="attribute">width</span>=<span class="value">"320px"</span> <span class="attribute">height</span>=<span class="value">"320px"</span>></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M 10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10"</span>
<span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"green"</span> <span class="attribute">stroke-width</span>=<span class="value">"2"</span> <span class="attribute">fill-opacity</span>=<span class="value">"0.5"</span>/></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p><strong>绘制三次贝塞尔曲线指令:C x1 y1, x2 y2, x y</strong>
三次贝塞尔曲线有两个控制点,就是(x1,y1)和(x2,y2),最后面(x,y)代表曲线的终点。体会下面的例子:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span> <span class="attribute">width</span>=<span class="value">"190px"</span> <span class="attribute">height</span>=<span class="value">"160px"</span>></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M10 10 C 20 20, 40 20, 50 10"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M70 10 C 70 20, 120 20, 120 10"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M130 10 C 120 20, 180 20, 170 10"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M10 60 C 20 80, 40 80, 50 60"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M70 60 C 70 80, 110 80, 110 60"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M130 60 C 120 80, 180 80, 170 60"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M10 110 C 20 140, 40 140, 50 110"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M70 110 C 70 140, 110 140, 110 110"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M130 110 C 120 140, 180 140, 170 110"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p><strong>特殊版本的三次贝塞尔曲线:S x2 y2, x y</strong>
很多时候,为了绘制平滑的曲线,需要多次连续绘制曲线。这个时候,为了平滑过渡,常常第二个曲线的控制点是第一个曲线控制点在曲线另外一边的映射点。这个时候可以使用这个简化版本。这里要注意的是,如果S指令前面没有其他的S指令或C指令,这个时候会认为两个控制点是一样的,退化成二次贝塞尔曲线的样子;如果S指令是用在另外一个S指令或者C指令后面,这个时候后面这个S指令的第一个控制点会默认设置为前面的这个曲线的第二个控制点的一个映射点,体会一下:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span> <span class="attribute">width</span>=<span class="value">"190px"</span> <span class="attribute">height</span>=<span class="value">"160px"</span>></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p><strong>绘制二次贝塞尔曲线指令:Q x1 y1, x y , T x y (特殊版本的二次贝塞尔曲线)</strong>
如果是连续的绘制曲线,同样可以使用简化版本T。同样的,只有T前面是Q或者T指令的时候,后面的T指令的控制点会默认设置为前面的曲线的控制点的映射点,体会一下:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span> <span class="attribute">width</span>=<span class="value">"190px"</span> <span class="attribute">height</span>=<span class="value">"160px"</span>></span>
<span class="tag"><<span class="title">path</span> <span class="attribute">d</span>=<span class="value">"M10 80 Q 52.5 10, 95 80 T 180 80"</span> <span class="attribute">stroke</span>=<span class="value">"black"</span> <span class="attribute">fill</span>=<span class="value">"transparent"</span>/></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p><strong>SVG path绘制注意事项</strong></p>
<blockquote>
<p>绘制带孔的图形时要注意:外层边的绘制需要是逆时针顺序的,里面的洞的边的顺序必须是顺时针的。只有这样绘制的图形填充效果才会正确。</p>
</blockquote>
<h1 id="svg-">SVG文本与图像</h1>
<ul>
<li>SVG不能执行自动换行</li>
<li>换行和回车变成空格,而多个空格压缩成单个空格</li>
</ul>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
</pre></td><td class="code"><pre><span class="tag"><<span class="title">svg</span>></span>
<span class="tag"><<span class="title">rect</span> <span class="attribute">width</span>=<span class="value">"300"</span> <span class="attribute">height</span>=<span class="value">"200"</span> <span class="attribute">fill</span>=<span class="value">"red"</span> /></span>
<span class="tag"><<span class="title">circle</span> <span class="attribute">cx</span>=<span class="value">"150"</span> <span class="attribute">cy</span>=<span class="value">"100"</span> <span class="attribute">r</span>=<span class="value">"80"</span> <span class="attribute">fill</span>=<span class="value">"green"</span> /></span>
<span class="tag"><<span class="title">text</span> <span class="attribute">x</span>=<span class="value">"150"</span> <span class="attribute">y</span>=<span class="value">"125"</span> <span class="attribute">font-size</span>=<span class="value">"60"</span> <span class="attribute">text-anchor</span>=<span class="value">"middle"</span> <span class="attribute">fill</span>=<span class="value">"white"</span>></span>SVG<span class="tag"></<span class="title">text</span>></span>
<span class="tag"></<span class="title">svg</span>></span>
</pre></td></tr></table></figure>
<p>如上面的例子中所示,text元素可以设置下列的属性:</p>
<p>x,y是文本位置坐标。
text-anchor是文本显示的方向,其实也就是位置(x,y)处于文本的位置。这个属性有start,middle和end三种值。
start表示文本位置坐标(x,y)位于文本的开始处,文本从这点开始向右挨个显示。
middle表示(x,y)位于文本中间处,文本向左右两个方向显示,其实就是居中显示。
end表示(x,y)点位于文本结尾,文本向左挨个显示。
除了这些属性,下面的这些属性都既可以在CSS中指定,也可以直接在属性中指定:</p>
<p>fill,stroke:填充和描边颜色,具体使用在后面总结。
font的相关属性:font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration。</p>
<blockquote>
<p>SVG中渲染图片 - image元素</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre>SVG中的<span class="keyword">image</span>元素可以直接支持显示光栅图片,使用很简单
</pre></td></tr></table></figure>
<p>这里需要注意几点:
1.如果没有设置x或y坐标,则默认是0。
2.如果没有设置width或height,则默认也是0.
3.如果显式的设置width或height为0,则会禁止渲染这幅图片。
4.图片的格式支持png,jpeg,jpg,svg等等,所以svg是支持嵌套svg的。
5.image与其他元素一样,是svg的常规元素,所以它支持所有的裁剪,蒙板,滤镜,旋转等效果。</p>
<h1 id="-">笔画与填充</h1>
<p><strong>填充色 - fill属性</strong></p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
</pre></td><td class="code"><pre><rect x=<span class="string">"10"</span> y=<span class="string">"10"</span> width=<span class="string">"100"</span> height=<span class="string">"100"</span> <span class="keyword">stroke</span>=<span class="string">"blue"</span> fill=<span class="string">"red"</span>
fill-opacity=<span class="string">"0.5"</span> <span class="keyword">stroke</span>-opacity=<span class="string">"0.8"</span>/>
</pre></td></tr></table></figure>
<p>上面例子中画了一个红色蓝边的矩形。注意几点:</p>
<ol>
<li>如果不提供fill属性,则默认会使用黑色填充,如果要取消填充,需要设置成none。</li>
<li>可以设置填充的透明度,就是fill-opacity,值的范围是0到1。</li>
<li>稍微复杂一点的是fill-rule属性。这个属性定义了判断点是不是属于填充范围的算法;除了inherit这个值外,还有两个取值:
nonzero:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的处的走向;计算结果从0开始,每有一个交点处的线段是从左到右的,就加1;每有一个交点处的线段是从右到左的,就减1;这样计算完所有交点后,如果这个计算的结果不等于0,则该点在图形内,需要填充;如果该值等于0,则在图形外,不需要填充。看下面的示例:
<img src="http://images.cnblogs.com/cnblogs_com/dxy1982/fillrule-nonzero.png" alt="">
evenodd:这个值采用的算法是:从需要判定的点向任意方向发射线,然后计算图形与线段交点的个数,个数为奇数则改点在图形内,需要填充;个数为偶数则点在图形外,不需要填充。看下图的示例:
<img src="http://images.cnblogs.com/cnblogs_com/dxy1982/fillrule-evenodd.png" alt=""></li>
</ol>
<p><strong>边框色 - stroke属性</strong></p>
<ol>
<li>如果不提供stroke属性,则默认不绘制图形边框。</li>
<li>可以设置边的透明度,就是stroke-opacity,值的范围是0到1。</li>
</ol>
]]></content>
<summary type="html"><![CDATA[<p><strong>可缩放矢量图形(Scalable Vector Graphics,简称SVG)</strong>是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 </p>
]]></summary>
<category term="svg" scheme="http://youfei.github.io/tags/svg/"/>
<category term="svg" scheme="http://youfei.github.io/categories/svg/"/>
</entry>
<entry>
<title><![CDATA[Bootstrap笔记]]></title>
<link href="http://youfei.github.io/2014/03/12/bootstrap-g-1/"/>
<id>http://youfei.github.io/2014/03/12/bootstrap-g-1/</id>
<published>2014-03-12T02:19:15.000Z</published>
<updated>2014-03-12T02:20:44.000Z</updated>
<content type="html"><![CDATA[<p>Bootstrap笔记</p>
<a id="more"></a>
<p>很有意思的小插件:<strong>Bootstrap 表单构造器</strong>
<a href="http://www.bootcss.com/p/bootstrap-form-builder/" target="_blank">http://www.bootcss.com/p/bootstrap-form-builder/</a></p>
]]></content>
<summary type="html"><![CDATA[<p>Bootstrap笔记</p>
]]></summary>
<category term="Bootstrap" scheme="http://youfei.github.io/tags/Bootstrap/"/>
<category term="Bootstrap" scheme="http://youfei.github.io/categories/Bootstrap/"/>
</entry>
<entry>
<title><![CDATA[mapinfo...]]></title>
<link href="http://youfei.github.io/2014/03/07/mapinfo-g-1/"/>
<id>http://youfei.github.io/2014/03/07/mapinfo-g-1/</id>
<published>2014-03-07T05:41:36.000Z</published>
<updated>2014-03-17T08:34:53.000Z</updated>
<content type="html"><![CDATA[<p>Mapinfo的数据库采用混合型的空间数据库结构,分别使用不同的模块存储空间数据和属性数据。属性数据存储在关系数据库的若干属性表中,而空间数据则以Mapinfo的自定义格式保存于若干文件之中,两者之间通过一定的索引机制联系起来。为了提高查询和处理效率,Mapinfo采用层次结构对空间数据进行组织,即根据不同的专题将地图分层,每个图层由5个文件组成</p>
<a id="more"></a>
<h1 id="-">图层文件</h1>
<ul>
<li>属性数据的表结构文件(.TAB) </li>
</ul>
<p>它定义了地图属性数据的表结构,包括字段数、字段名称、字段类型和字段宽度、索引字段及相应图层的一些关键空间信息描述。TAB 文件实际上是一个文本文件。 </p>
<ul>
<li>属性数据文件(.DAT) </li>
</ul>
<p>它用于存放完整的地图属性数据。包括文件头,表结构描述,及各条属性数据记录。 </p>
<ul>
<li>交叉索引文件(.ID) </li>
</ul>
<p>它记录了地图中每一个空间对象在空间数据文件中的位置指针。指针的列的顺序与属性数据文件中属性数据记录存放的顺序一致。它实际上是一个空间对象的定位表。 </p>
<ul>
<li>空间数据文件(.MAP) </li>
</ul>
<p>它包含了各地图对象的空间属性。比如对象的几何类型、坐标信息和颜色信息等。还描述了与空间对象的属性数据记录在属性数据文件中的记录号,当用户从地图上查询某一地图对象时,就能够地查到其相关的属性信息。 </p>
<ul>
<li>索引文件(.IND) </li>
</ul>
<p>它不是必须的,只有当用户规定了数据库的索引字段后,系统才会自动产生它。 </p>
<h1 id="gis-cad-database-spatial-operation">GIS = CAD + DAtabASE + Spatial Operation</h1>
<h2 id="gis-">GIS 的工作原理</h2>
<p>1 空间模型
GIS 将现实世界抽象为互相联接不同特征的层面(LAYER)组合</p>
<p>2 地理参考系
空间数据包括绝对位置信息(如经纬度坐标)以及相对位置信息(包括地址、编码、统计调查值等)</p>
<p>3 矢量和栅格数据结构
GIS 数据包括矢量和栅格两种基本模式。
矢量数据以点、线、面方式编码并以(x,y)坐标串存储管理,是表现离散空间特性的最佳方式。
栅格数据(扫描图像或照片)是通过一系列网格单元表达连续地理特征。</p>
<h2 id="mapinfo-mapping-information">MapInfo = Mapping + Information</h2>
<p>栅格图像是由一行行细小的点(像素)组成,所以也可以称之为位图,是后续工作即图层分解的基础,又称作基图。</p>
<h3 id="-">栅格图像的获取</h3>
<p>1, 扫描仪/数码相机
2, 通过图形软件包将图像保存或转存为栅格文件格式,tif
3, 在MapInfo 购买已配准的栅格图像。</p>
<h3 id="mapinfo-7-">MapInfo 支持7中栅格图像:</h3>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre>1,gif
2, jpg
3, tif
4, pcx
5, bmp
6, tda
7, bll (spot卫星图像)
</pre></td></tr></table></figure>
<p>地图对象:点,线,面</p>
<h3 id="-mapinfo-widget-tool-bar-"><strong>MapInfo widget tool bar</strong></h3>
<p>1 Web Services:
从MapInfo Server获取数据,此处的Web Server指的是“MapInfo公司”的Web服务
2 DBMS
ODBC联接数据库
3 Drawing
在Image上画图工具
4 Main
各种Select工具:图片、工作区、图层、link</p>
<h3 id="-what-data-can-i-use-in-mapinfo-professional-"><strong>What Data Can I Use in MapInfo Professional?</strong></h3>
<p>Data file choices include:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre>• Microsoft Access
• Microsoft Excel
• dBASE DBF
• ESRI ® shapefiles
• <span class="keyword">Raster</span> Images
• <span class="keyword">Grid</span> Images
• ASCII Delimited <span class="keyword">Text</span> ---》二进制文件,格式?
• Lotus <span class="number">1</span>–<span class="number">2</span>–<span class="number">3</span>
• Remote Databases (Oracle, SQL Server, PostGIS)
• Workspace
• Comma Delimited CSV files
</pre></td></tr></table></figure>
<blockquote>
<p>So we can choose Excel/CSV as Data Source</p>
<p>During the .TAB file creation process, the original file is in no way altered. The file retains its
original properties.</p>
</blockquote>
<h3 id="-support-for-raster-images-"><strong>Support for Raster Images</strong></h3>
<blockquote>
<p>支持栅格图像,需要 License</p>
</blockquote>
<p>When you bring in a raster image to MapInfo Professional, you may need to register it (specify its
map coordinates) so MapInfo Professional can display it properly. Choosing the Raster Image file
format from the Open dialog box will bring you to the Image Registration dialog box where you can
specify the appropriate map coordinates. Once you register the image, a process that creates a
.TAB file for the image, you can open it as you would open any table in a Map window. Images that
you purchase from MapInfo Professional will already be registered.</p>
<blockquote>
<p>For a full discussion of raster image display, see Registering SPOT Images in the Help System.</p>
</blockquote>
<p><strong>There is a two Giga Byte (2 GB) file limit on these files MapInfo Professional</strong></p>
<h3 id="-using-workspaces-"><strong>Using Workspaces</strong></h3>
<p><strong>A .WOR</strong> file is MapInfo Professional workspace file containing un-compiled MapBasic code that
MapInfo Professional interprets to open a session with tables, windows, and settings the way a user
left it. It is MapInfo Professional version specific depending on features used in it.
<strong>A .MWS</strong> workspace file originates from the MapXtreme product line and is comprised of XML code
to do things similar to a MapInfo Workspace *.wor with some limitations.</p>
<blockquote>
<p>whithout License, the layer can not be edited.</p>
</blockquote>
<h3 id="-supported-export-formats-"><strong>Supported Export Formats</strong></h3>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre>• Windows Bitmap (*<span class="preprocessor">.BMP</span>)
• Windows Metafile (*<span class="preprocessor">.WMF</span>)
• Windows Enhanced Metafile (*<span class="preprocessor">.EMF</span>)
• EMF + Metafile (*<span class="preprocessor">.EMF</span>)
• EMF + Dual Metafile (*<span class="preprocessor">.EMF</span>)
• JPEG File Interchange Format (*<span class="preprocessor">.JPG</span>)
• JPEG <span class="number">2000</span> (*<span class="preprocessor">.JP</span>2)
• Portable Network Graphics Format (*<span class="preprocessor">.PNG</span>)
• Tagged Image File Format (*TIF)
• TIFF CMYK (*<span class="preprocessor">.TIF</span>)
• TIFF CCITT Group <span class="number">4</span> (*<span class="preprocessor">.TIF</span>)
• TIFF LZW (*<span class="preprocessor">.TIF</span>)
• Graphic Interchange Format (*<span class="preprocessor">.GIF</span>)
• Photoshop <span class="number">3.0</span> (*<span class="preprocessor">.PSD</span>)
</pre></td></tr></table></figure>
<p><strong>mporting and Exporting Data in AutoCAD Format</strong></p>
<blockquote>
<p>Web Services – Sets refresh, timeout values, server options and other default settings for Proxy
Servers, WMS, WFS, Geocode server, Drivetime server, and Map Tile server web services.</p>
</blockquote>
]]></content>
<summary type="html"><![CDATA[<p>Mapinfo的数据库采用混合型的空间数据库结构,分别使用不同的模块存储空间数据和属性数据。属性数据存储在关系数据库的若干属性表中,而空间数据则以Mapinfo的自定义格式保存于若干文件之中,两者之间通过一定的索引机制联系起来。为了提高查询和处理效率,Mapinfo采用层次结构对空间数据进行组织,即根据不同的专题将地图分层,每个图层由5个文件组成</p>
]]></summary>
<category term="mapinfo" scheme="http://youfei.github.io/tags/mapinfo/"/>
<category term="mapinfo" scheme="http://youfei.github.io/categories/mapinfo/"/>
</entry>
<entry>
<title><![CDATA[solr初读-1]]></title>
<link href="http://youfei.github.io/2014/03/06/solr-g-1/"/>
<id>http://youfei.github.io/2014/03/06/solr-g-1/</id>
<published>2014-03-06T02:06:16.000Z</published>
<updated>2014-03-06T06:13:20.000Z</updated>
<content type="html"><![CDATA[<p>看Solr 的时候偶尔看到了一个博客,写的太和俺的胃口了,加到友情链接里面,嘿嘿</br>
<a href="http://blog.csdn.net/zyb243380456/article/details/7225768" target="_blank">zyb243380456的专栏</a></p>
<a id="more"></a>
<h1 id="1-solr-">1.solr认识</h1>
<p>solr是基于lucene开发包而搭建起来的一个依赖于Servlet容器的一个全文检索组件,他可以为自己的
web应用提供简单的检索服务,也可以搭建复杂的集群环境进行全文检索,例如如果索引文件很大大概
有7-90GB的索引文件就需要做分布式了应为这样的数据量一台机器的检索数据的速度太慢,如果需要
进行集群demo测试可以在本机多开启几个web应用服务器就可以了。</p>
<p><strong>Solr4 结构图</strong>
<img src="http://img1.51cto.com/attachment/201304/164703786.png" alt="Solr4 结构图*"></p>
<hr>
<h1 id="2-web-solr-">2.快速的为你的web应用提供solr全文检索服务</h1>
<h2 id="tomcat-uriencoding">Tomcat URIEncoding</h2>
<p><strong>server.xml</strong></p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
</pre></td><td class="code"><pre><span class="tag"><<span class="title">Connector</span> <span class="attribute">port</span>=<span class="value">"8080"</span> <span class="attribute">protocol</span>=<span class="value">"HTTP/1.1"</span>
<span class="attribute">connectionTimeout</span>=<span class="value">"20000"</span>
<span class="attribute">redirectPort</span>=<span class="value">"8443"</span> <span class="attribute">URIEncoding</span>=<span class="value">"UTF-8"</span>/></span>
</pre></td></tr></table></figure>
<h2 id="-jar-">需要的jar:</h2>
<p><strong>apache-solr-core-3.2.0.jar</strong> </br>
<strong>apache-solr-solrj-3.2.0.jar</strong>-->用于提供测试solr全文检索的java客户端</p>
<h2 id="-solr-home-">如何配置你的<code>solr.home</code>的主要目录结构</h2>
<p> 可以以任意名字的目录进行配置, 但是在这个目录的里面需要按照solr的要求来配置
在xxx目录里面有<strong>bin</strong>, <strong>data</strong>, <strong>conf</strong>和<strong>solr.xml</strong>三个目录和一个配置文件,这个配置文件用于
配置<strong>CoreContainer</strong>容器的多实例通过这个配置实现</p>
<p> 在<code>bin</code>里面是solr插件的第三方jar包; 也就是你需要为solr添加的插件包放在这个里面</br></p>
<p> <code>data</code>下面有index,和spellcheck两个目录分别是存放索引文件和拼写检查的什么东西</br></p>
<p> 在<code>conf</code>下面全部是与当前solrcore实例相关的一些配置文件,例如 <code>solrconfig.xml</code>, <code>schema.xml</code></br></p>
<p> <code>scripts.conf</code>这三个文件是最重要的;</p>
<ul>
<li>第一个用于配置当前solrcore如何对外提供全文检索服务</li>
<li>第二个用于配置当前solrcore实例的索引文档的格式以及文档的字段信息</li>
<li>第三个用于做solr分布式索引分发以及同步的配置文件</li>
</ul>
<h2 id="solr-servlet-solr-home-">solr如何与servlet容器相关联[配置solr.home]</h2>
<blockquote>
<p>上面已经配置好solr的木要目录结构然后只要让solrDispatchFilter在实例化的时候找到这个目录就能够初始化我们的solr.home了</br></p>
<p>可以在过滤器或者监听器构造函数中通过设置jvm系统参数的形式</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre> System<span class="preprocessor">.setProperty</span>(<span class="string">"solr.solr.home"</span>,<span class="string">"dir"</span>)<span class="comment">;</span>
</pre></td></tr></table></figure>
<blockquote>
<p>web.xml中进行描述,上面已经复制过通过在tomcat的JNDI容器中进行指定就是那个context.xml中</p>
</blockquote>
<p>在web.xml中配置SolrDispatchFilter.java</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre><span class="comment"><!-- 过滤所有与solr相关的http请求 --></span>
<span class="tag"><<span class="title">filter</span>></span>
<span class="tag"><<span class="title">filter-name</span>></span>SolrRequestFilter<span class="tag"></<span class="title">filter-name</span>></span>
<span class="tag"><<span class="title">filter-class</span>></span>org.apache.solr.servlet.SolrDispatchFilter<span class="tag"></<span class="title">filter-class</span>></span>
<span class="tag"><<span class="title">init-param</span>></span>
<span class="comment"><!-- 通过一特定开头的字符标志需要solr服务 --></span>
<span class="tag"><<span class="title">param-name</span>></span>path-prefix<span class="tag"></<span class="title">param-name</span>></span>
<span class="tag"><<span class="title">param-value</span>></span>solrservice<span class="tag"></<span class="title">param-value</span>></span>
<span class="tag"></<span class="title">init-param</span>></span>
<span class="tag"></<span class="title">filter</span>></span>
<span class="tag"><<span class="title">filter-mapping</span>></span>
<span class="tag"><<span class="title">filter-name</span>></span>SolrRequestFilter<span class="tag"></<span class="title">filter-name</span>></span>
<span class="tag"><<span class="title">url-pattern</span>></span>/*<span class="tag"></<span class="title">url-pattern</span>></span>
<span class="tag"></<span class="title">filter-mapping</span>></span>
</pre></td></tr></table></figure>
<hr>
<h1 id="3-solr-">3.solr相关包的概要</h1>
<h2 id="-jar-">首先需要的jar包有:</h2>
<h3 id="apache-solr-core-3-2-0-jar-">apache-solr-core-3.2.0.jar;</h3>
<p>这是jar包中所包含的包:</p>
<blockquote>
<p>org.apache.solr.analysis</br></p>
</blockquote>
<p>这个包主要解决分词问题,学习solr之前必须对lucene的简单结构
进行了解如何分词lucene中已经提到过</p>
<blockquote>
<p>org.apache.solr.client.solrj.embedded</br></p>
</blockquote>
<p>solrj主要提供方便的方式去应用solr全文检索的功能</p>
<blockquote>
<p>org.apache.solr.core</br></p>
</blockquote>
<p>包含的主要类介绍</br>
org.apache.solr.core.CoreContainer.java,</br>
org.apache.solr.core.Config.java,</br>
org.apache.solr.core.SolrConfig.java,</br>
org.apache.solr.core.SolrCore.java</br>
org.apache.solr.core.CoreDescriptor.java,</br>
org.apache.solr.core.DirectoryFactory.java,</br>
org.apache.solr.core.SolrResourceLoader.java</p>
<p>不管你有多少个solrcore实例那么solrcore的实例都会存放在我们的CoreContainer的</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>1
</pre></td><td class="code"><pre><span class="keyword">protected</span> final <span class="keyword">Map</span><<span class="typename">String</span>, SolrCore> cores = <span class="keyword">new</span> LinkedHashMap<<span class="typename">String</span>, SolrCore>();
</pre></td></tr></table></figure>
<p>这个属性中也就是用于保存solrcore实例,那么solrCore是如何被创建的,他是根据SolrConfig创建的</br>
<strong>solrConfig</strong>继承自Config类Config类提供的xPath的方式去解析xml文件</br>
<strong>solrConfig</strong>对应到我们的SolrConfig.xml文件,然后SolrResourceLoader是用来加载配置文件的并且用于定位solr.home</br>
<strong>solr.home</strong>在SolrResourceLoader是怎么定位到<code>solr.home</code>的:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre>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
</pre></td><td class="code"><pre><span class="keyword">public</span> static <span class="built_in">String</span> locateSolrHome() {
<span class="built_in">String</span> home <span class="subst">=</span> <span class="built_in">null</span>;
<span class="comment">// 功过JNDI的方式定位到solrHome的主要目录</span>
<span class="comment">// 他可以在web.xml中这样配置</span>
<span class="comment">//<env-entry></span>
<span class="comment">//<env-entry-name>solr/home</env-entry-name></span>
<span class="comment">//<env-entry-value>C:\\apache-tomcat-6.0.35-windows-x64\\apache-tomcat-6.0.35\\webapps\\solr</env-entry-value></span>
<span class="comment">//<env-entry-type>java.lang.String</env-entry-type></span>
<span class="comment">//</env-entry></span>
try {
Context c <span class="subst">=</span> <span class="literal">new</span> InitialContext();
home <span class="subst">=</span> (<span class="built_in">String</span>)c<span class="built_in">.</span>lookup(<span class="string">"java:comp/env/"</span><span class="subst">+</span>project<span class="subst">+</span><span class="string">"/home"</span>);
<span class="keyword">log</span><span class="built_in">.</span>info(<span class="string">"Using JNDI solr.home: "</span><span class="subst">+</span>home );
} catch (NoInitialContextException e) {
<span class="keyword">log</span><span class="built_in">.</span>info(<span class="string">"JNDI not configured for "</span><span class="subst">+</span>project<span class="subst">+</span><span class="string">" (NoInitialContextEx)"</span>);
} catch (NamingException e) {
<span class="keyword">log</span><span class="built_in">.</span>info(<span class="string">"No /"</span><span class="subst">+</span>project<span class="subst">+</span><span class="string">"/home in JNDI"</span>);
} catch( RuntimeException ex ) {
<span class="keyword">log</span><span class="built_in">.</span>warn(<span class="string">"Odd RuntimeException while testing for JNDI: "</span> <span class="subst">+</span> ex<span class="built_in">.</span>getMessage());
}
<span class="comment">// 如果JNDI没有找到主要目录的话就会尝试在System.getProperty("solr.solr.home");</span>
<span class="comment">// 也就是JVM的系统参数中进行一个查找只要是在同一个JVM中都是可以找到的</span>
<span class="comment">// 你也可以在某个监听器或者过滤器中指定solrhome他是这样指定的</span>
<span class="comment">// 需要注意的是你的过滤器必须要在SolrDispatchFilter.java这个过滤器之前因为</span>
<span class="comment">// 容器初始化过滤器的时候是根据配置文件的顺序进行实例话的</span>
<span class="comment">// 在SolrDispatchFilter.java过滤器实例化的时候进行了很多的solr初始化服务包括容器的初始化等</span>
<span class="comment">// 所以必须要在这个过滤器实例化之前指定solrhome的主要目录</span>
<span class="comment">// System.setProperty("solr.solr.home","dir");</span>
<span class="keyword">if</span>( home <span class="subst">==</span> <span class="built_in">null</span> ) {
<span class="built_in">String</span> prop <span class="subst">=</span> project <span class="subst">+</span> <span class="string">".solr.home"</span>;
home <span class="subst">=</span> System<span class="built_in">.</span>getProperty(prop);
<span class="keyword">if</span>( home <span class="subst">!=</span> <span class="built_in">null</span> ) {
<span class="keyword">log</span><span class="built_in">.</span>info(<span class="string">"using system property "</span><span class="subst">+</span>prop<span class="subst">+</span><span class="string">": "</span> <span class="subst">+</span> home );
}
}
<span class="comment">// 如果上面的两种方式都没有找到就会到web应用的主目录下就行查找</span>
<span class="comment">// 如果你的web应用名字叫test的话他就到test目录下去找solr这个目录</span>
<span class="keyword">if</span>( home <span class="subst">==</span> <span class="built_in">null</span> ) {
home <span class="subst">=</span> project <span class="subst">+</span> <span class="string">'/'</span>;
<span class="keyword">log</span><span class="built_in">.</span>info(project <span class="subst">+</span> <span class="string">" home defaulted to '"</span> <span class="subst">+</span> home <span class="subst">+</span> <span class="string">"' (could not find system property or JNDI)"</span>);
}
<span class="keyword">return</span> normalizeDir( home );
}
</pre></td></tr></table></figure>
<p>定位到<code>solr.home</code>的主要目录后也就可以根据特定的目录层次结构进行加载配置文件然后实例容器然后向容器中添加solrcore实例了。</br></p>
<p><strong>CoreDescriptor</strong>这个类主要是用来描述一个solrcore实例特征的相当于介绍这个solrcore有几个处理器,并且
有chema.xml文件在那个位置然后这个solrcore的名字叫什么他的数据索引文件存放在哪个位置等...</br>
<strong>DirectoryFactory</strong>这个类对应的lucene中的FSDirectory他是找到所有索引文件所在的目录。</br></p>
<blockquote>
<p>org.apache.solr.handler</p>
</blockquote>
<p>这个包中有提供了大部分solr提供的服务功能的实现</br>
处理器也就是处理提出的各种不同的solr的全文检索服务要求 </br>
包括crud和控制我们的容器对象和solrcore实例对象的一些处理方式</p>