jquery.svg.jsプラグインを使用して、図面を記述します。 SVGグラフィックスを使用するためのjQueryプラグインの記事で 、プラグインに関する紹介を読むことができます。
プラグインを使用して解決するタスクの1つは、図面の説明を最小限にすることです。 図面の説明は、関数の形式であり、SVGと同じオブジェクトモデルを持ちます。
図面記述関数の短縮例
function drawIntro(svg) { svg.configure({viewBox: '0 0 420 297'}, true); var defs = svg.defs(); /* - Hatch */ /* */ var hatch0_45 = svg.pattern(defs, 'hatch0_45', 0, 0, 20, 20, 0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'}); svg.line(hatch0_45, 1, 20, 20, 1, {class_: 'line-type-2'}); svg.line(hatch0_45, 0, 1, 1, 0, {class_: 'line-type-2'}); /* , 0,25 */ var hatch0_45_0_25 = svg.pattern(defs, 'hatch0_45-0_25', 0, 0, 20, 20, 0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'}); svg.line(hatch0_45_0_25, 1, 20, 20, 1, {class_: 'line-type-2-0_25'}); svg.line(hatch0_45_0_25, 0, 1, 1, 0, {class_: 'line-type-2-0_25'}); /* , 0,25 */ var hatch1_45_0_25 = svg.pattern(defs, 'hatch1_45-0_25', 0, 0, 20, 20, 0, 0, 20, 20, {patternUnits: 'userSpaceOnUse'}); svg.line(hatch1_45_0_25, 0, 20, 20, 0, {class_: 'line-type-2-0_25'}); svg.line(hatch1_45_0_25, 0, 0, 20, 20, {class_: 'line-type-2-0_25'}); /* */ /* ( ) */ var dimp1 = svg.marker(defs, 'dimArrow-1', 0, 0, 8, 6, 'auto', {viewBox: '-2 -12 29 24'}); svg.path(dimp1, 'M0,0 L20,-4 16,0 20,4 z M0,-10 L0,10 M0,0 L27,0', {stroke: 'black', strokeWidth: 1.4}); /* ( ) */ var dimp2 = svg.marker(defs, 'dimArrow-2', 0, 0, 8, 6, 'auto', {viewBox: '-27 -12 29 24'}); svg.path(dimp2, 'M0,0 L-20,-4 -16,0 -20,4 z M0,-10 L0,10 M0,0 L-27,0', {stroke: 'black', strokeWidth: 1.4}); /* / */ var viewp3 = svg.marker(defs, 'ViewPoint', 0, 0, 10.6, 8.8, 'auto', {viewBox: '-2 -12 29 24'}); svg.path(viewp3, 'M3,0 L23,-4 19,0 23,4 z', {stroke: 'black', strokeWidth: 1.4}); svg.title('SVG for CAD'); var Shtamp = svg.svg( 0, 0, 420, 297, 0, 0, 420, 297); svg.title(Shtamp, ' '); svg.rect(Shtamp, 20, 5, 395, 287, {class_: 'line-type-1'}); svg.line(Shtamp, 230, 237, 415, 237, {class_: 'line-type-1'}); ... /* - View1 */ var View1 = svg.svg( 45, 7, 155, 170, -25, -200, 620, 680); svg.title(View1, ' 1'); svg.line(View1, 0, 325, 500, 325, {class_: 'line-type-1-0_25'}); svg.line(View1, 0, 225, 0, 325, {class_: 'line-type-1-0_25'}); ... /* - View2 */ var View2 = svg.svg( 25, 158, 200, 130, -100, -250, 800, 520); svg.title(View2, ' 2'); svg.circle(View2, 250, 0, 40, {class_: 'line-type-1-0_25'}); svg.circle(View2, 250, 0, 60, {class_: 'line-type-1-0_25'}); ... /* - View3 */ var View3 = svg.svg(250, 45, 150, 200, -50, -50, 600, 800); svg.title(View3, ' 3'); svg.line(View3, 0, 325, 320, 325, {class_: 'line-type-1-0_25'}); svg.line(View3, 0, 225, 30, 225, {class_: 'line-type-1-0_25'}); ... }
代わりにSVG形式で行を記述する場合
<line class="line-type-1" x1="475" y1="325" x2="475" y2="225"/>
あなたは最小化するために別の方法で行を書くことができます
<path class="line-type-1" d="M475,325L475,225"/>
その後、プラグインのようなトリックは勝利を与えません
svg.line(View1,247,237,247,292,{class_:'line-type-1'}); svg.path(View1,'M247,237L247,292',{class_:'line-type-1'});
回線記述の上記の例を比較すると、JavaScriptを使用してもコードが削減されないと結論付けます。
専用のプラグインを作成する必要があります。 図面では、スタイル1（メインライン）のラインの最大数、スタイル2（細いライン）のラインが、サイズやその他の複雑なオブジェクトの構成に含まれていることがよくあります。 スタイル1の行については、デフォルトで説明を省略できます。コードはこの種類になります
svg.line(View1,247,237,247,292);
サイズを説明する例を挙げます
SVG形式
<g class="DimL"> <line class="line-type-2-0_25" x1="190" y1="180" x2="190" y2="230"/> <line class="line-type-2-0_25" x1="310" y1="180" x2="310" y2="230"/> <line class="line-type-2-0_25" x1="190" y1="230" x2="310" y2="230"/> <path stroke-width="4" d="M190,230L310,230" marker-start="url(#dimArrow-1)" marker-end="url(#dimArrow-2)"/> <text class="styles-3" x="265" y="222" font-size="28" text-anchor="middle">120</text> </g>
jquery.svg.jsプラグイン関数形式
var dimL1 = svg.group(View2); svg.line(dimL1, 190, 180, 190, 230, {class_: 'line-type-2-0_25'}); svg.line(dimL1, 310, 180, 310, 230, {class_: 'line-type-2-0_25'}); svg.line(dimL1, 190, 230, 310, 230, {class_: 'line-type-2-0_25'}); svg.path(dimL1, 'M190,230 L310,230', {strokeWidth: 4, markerStart: 'url(#dimArrow-1)', markerEnd: 'url(#dimArrow-2)'}); svg.text(dimL1, 265, 222, '120', {class_: 'styles-3', fontSize: '28', textAnchor: 'middle'});
特殊なプラグイン関数の形式で
var dimText = [0, 0, '120']; var dimDrawing = [0, [190,180,'dimArrow-1'],[310,180,'dimArrow-2'],[0,50,1]]; svg.diml(View2, dimDrawing, dimText);
jquery.svg.jsプラグインの使用のデモ
2番目のデモ
テストケース1のアーカイブ
テスト例2のアーカイブ
最初のテストケースは通常のエディターで手動で作成され、約300個の要素が含まれています。2番目のテストケースはライブラリによってCompass-Graphからエクスポートされ、3000個を超える要素が含まれています。 .DXFおよび.DWG形式のファイルは、Compass-chartからのエクスポートによって作成されました。 .SVGおよび.SVGZ形式のすべてのファイルは、 Inkscapeの最新バージョンで完全に開きます。
さまざまな形式のファイルサイズの比較表
| 書式 | 例1、バイト | 例2、バイト | CSSスタイルファイル、バイト |
|---|---|---|---|
| .CDW（コンパスグラフ9） | 50 146 | 182 778 | - |
| .DWG（コンパスグラフ9） | 65 751 | 226 583 | - |
| .DXF（コンパスグラフ9） | 182 817 | 807 300 | - |
| .SVG | 29 110 | 306 678 | - |
| 最小化された.SVG | - | 175 671 | - |
| .SVGZ | 5,435 | 55,763 | - |
| 最小化された.SVGZ | - | 32,784 | - |
| .JS、jquery.svg.jsプラグイン | 23 012 | 267 897 | 4 589 |
| .JS最小化、jquery.svg.jsプラグイン | 15,490 | 179,071 | 1,728 |
| .PNG形式のラスターファイル | 51 970 | 57 384 | - |
記事の更新バージョン