フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

フロントエンドはJavaScriptを通じてCADグラフィックスの詳細を作成および変更します。

1. 現状

CAD図面の作成と修正は、通常、 AutoCADに基づく二次開発を通じて行われます。ObjectARX ObjectARXAutoCADプラットフォームでの二次開発用にAutoDeskがリリースした開発ソフトウェア パッケージです。C++ に基づくオブジェクト指向開発環境とアプリケーション プログラミング インターフェイスを提供し、 AutoCAD図面データベースに確実に迅速にアクセスできます。 これまでのAutoCAD二次開発ツールであるAutoLISPや ADS とは異なり、 ObjectARXアプリケーションは、 AutoCADのアドレス空間を共有し、 AutoCADに直接関数を呼び出す DLL (ダイナミック リンク ライブラリ) です。したがって、ARX を使用してプログラムされた関数の実行速度を大幅に向上できます。 ARX クラス ライブラリは標準の C++ クラス ライブラリ カプセル化形式を使用するため、プログラマーのプログラミングの信頼性と効率が大幅に向上します。

ObjectARX二次開発に使用するには、まず ObjectARX 開発環境をセットアップする必要があります。一般的に使用される開発環境は、 Microsoft Visual C++ 6.0Microsoft visual studio 2005Microsoft visual studio 2008Microsoft visual studio 2010です。同時に、 ObjectARX SDKもインストールする必要があります。

Visual C++ や ObjectARX などの開発言語や環境は、多くの開発者を怖がらせてきたに違いありません。データに基づいてグラフを自動的に生成したり、既存のグラフに非常に簡単な変更を加えたりといった単純なシナリオについてはどうでしょうか。簡単な方法や言語、開発環境はありますか?

2. JSでCADグラフィックを作成および変更する

Weijie Map は、一般的に使用されているAutoCADエンティティのカプセル化をフロントエンドに実装し、 JavaScriptスクリプトを通じて新しい CAD グラフィックスを作成できます。

2.1 サポートされているCADエンティティタイプ

クラス名例示する
Dbライン直線
Dbカーブ曲線
Db2dポリライン2Dポリライン
Db3dポリライン3Dポリライン
Dbポリラインポリライン
ブロック参照ブロック参照
ディスクアークアーク
Dbサークルラウンド
Db楕円楕円形
デーブハッチ充填
文章1行テキスト
DbMテキスト複数行テキスト
ラスターイメージラスター画像
Dbシェイプタイプエンティティ
スプラインスプライン
一掃するエンティティをマスクする
寸法注釈
Db2LineAngularDimension角度寸法 [2 行]
Db3ポイント角度寸法角度マーキング[3点]
DbAlignedDimension寸法を揃える
Db円弧ディメンションアークディメンション
Db直径寸法直径寸法
DbOrdinateDimension座標マーキング
Dbラジアルディメンション半径寸法
DbRadialDimensionLarge半径ポリライン注釈
Db回転ディメンションコーナー注釈
データベースレイヤーレイヤー
Dbテキストスタイルテキストスタイル
DbDimスタイル寸法スタイル
Db線種スタイル線のスタイル
Dbブロックブロック定義
Dbドキュメントデータベースドキュメント

新しいバスケットボール コートの図を例に挙げてみましょう。関連するコードは次のとおりです。

(非同期() => {
 // -- 新しいマップを作成します -- バックグラウンドで新しい CAD マップを作成し、それをフロントエンドで開きます // js コード let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 doc を新しい vjmap.DbDocument() にします。
 エンティティを [] とします。
 line1 を新しい vjmap.DbLine() とします。
 行1.開始 = [0, 0]
 行1.終了 = [0, 15]
 エンティティ.push(行1)
 
 line2 を新しい vjmap.DbLine() とします。
 行2.開始 = [0, 14.1]
 2行目終了 = [2.99, 14.1]
 エンティティ.push(行2)
 
 line3 を新しい vjmap.DbLine() にします。
 行3.開始 = [0, 0.9]
 3行目終了 = [2.99, 0.9]
 エンティティ.push(行3)
 
 line4 を新しい vjmap.DbLine() にします。
 行4.開始 = [0, 9.95]
 行4.終了 = [5.8, 9.95]
 エンティティ.push(行4)
 
 line5 を新しい vjmap.DbLine() にします。
 5行目.開始 = [0, 5.05]
 5行目終了 = [5.8, 5.05]
 
 ハッチを新しいvjmap.DbHatch()にします。
 hatch.pattern = "SOLID";
 ハッチングの色 = 0xB43F32;
 hatch.points = [line4.start, line4.end, line5.end, line5.start];
 エンティティをプッシュします(ハッチ);
 エンティティ.push(行4)
 エンティティ.push(行5)
 
 line6 を新しい vjmap.DbLine() にします。
 6行目開始 = [5.8, 5.05]
 6行目終了 = [5.8, 9.95]
 エンティティ.push(6行目)
 
 arc1 を新しい vjmap.DbArc() とします。
 弧1の中心 = [5.7963, 7.504];
 arc1の半径 = 1.8014;
 arc1.開始角度 = 270 * Math.PI / 180.0;
 arc1.endAngle = 90 * Math.PI / 180.0;
 エンティティ.push(arc1)
 
 arc2 を新しい vjmap.DbArc() とします。
 弧2の中心 = [5.7963, 7.504];
 arc2の半径 = 1.8014;
 arc2.開始角度 = 90 * Math.PI / 180.0;
 arc2.endAngle = 270 * Math.PI / 180.0;
 //arc2.linetype = "破線"
 エンティティ.push(arc2)
 
 arc3 を新しい vjmap.DbArc() とします。
 arc3.center = [1.575, 7.5];
 arc3.半径 = 6.75;
 arc3.開始角度 = 282 * Math.PI / 180.0;
 arc3.endAngle = 78 * Math.PI / 180.0;
 エンティティ.push(arc3)
 
 ブロックを新しい vjmap.DbBlock() にします。
 block.name = "ボール";
 ブロックの原点 = [0, 0]
 block.entitys = エンティティ;
 doc.appendBlock(ブロック);
 
 blockRef1 を新しい vjmap.DbBlockReference() とします。
 blockRef1.blockname = "ボール";
 ブロックRef1.位置 = [0, 0];
 doc.appendEntity(ブロック参照1);
 
 blockRef2 を新しい vjmap.DbBlockReference() にします。
 blockRef2.blockname = "ボール";
 ブロック参照2.位置 = [28, 15];
 blockRef2.rotation = Math.PI;
 doc.appendEntity(ブロック参照2);
 
 otherEnts = [ とする
  新しい vjmap.DbLine({
   開始: [0, 15],
   終了: [28, 15]
  })、
  新しい vjmap.DbLine({
   開始: [0, 0],
   終了: [28, 0]
  })、
  新しい vjmap.DbLine({
   開始: [14, 0],
   終了: [14, 15],
   カラーインデックス: 1
  })、
  新しい vjmap.DbCircle({
   中央:[14, 7.5],
   半径: 1.83、
   色: 0xFF0000
  })、
  新しい vjmap.DbText({
   位置: [14, 16],
   内容:「バスケットボールコート図」、
   カラーインデックス: 1,
   水平モード: 4,
   高さ: 1,
  })
 ]
 
 doc.appendEntity(その他のエンティティ)。
 
 // js コード let res = await svc.updateMap({
  mapid: "バスケットボールコート",
  ファイルドキュメント: doc.toDoc(),
  マップオープンウェイ: vjmap.MapOpenWay.Memory、
  style: vjmap.openMapDarkStyle() // div の背景色が暗い場合は、暗い背景のスタイルもここに渡されます})
 (res.error)の場合{
  メッセージ.エラー(res.エラー)
 }
 mapExtent = vjmap.GeoBounds.fromString(res.bounds); とします。
 prj = new vjmap.GeoProjection(mapExtent); とします。
 
 var map = 新しい vjmap.Map({
  container: 'map', // コンテナID
  スタイル: svc.rasterStyle(),
  中心: prj.toLngLat(mapExtent.center()),
  ズーム: 2,
  レンダリングワールドコピー: false
 });
 マップをアタッチします(svc、prj);
 マップの境界にフィットします。
 
 map.addControl(新しい vjmap.NavigationControl());
 map.addControl(新しいvjmap.MousePositionControl({showZoom: true}));
 
 map.enableLayerClickHighlight(svc, e => {
  e && message.info(`type: ${e.name}, objectid: ${e.objectid}, レイヤー: ${e.layerindex}`);
 })
})();


作成後の Web 表示は次のようになります。

作成された DWG 図面は AutoCAD で開くことができます。

2.2 変更または削除

from属性が設定されているマップを変更すると、このマップ上でマップが変更、追加、または削除されます。形式は、 exam/v1などのmapid/versionです。

削除するには、グラフ内のエンティティのobjectIDを指定します。

サンプルコードは次のとおりです。

doc を新しい vjmap.DbDocument() にします。
/** データの取得元となるマップ。このマップ上でデータが変更、追加、または削除されます。形式は、exam/v1 などの mapid/version です。 */
doc.from = "バスケットボールコート/v1";
 
// `objectid` エンティティハンドルを渡してエンティティを変更または削除します。`objectid` がない場合は、追加することを意味します。let modifyEnts = [
    /*改訂*/
    新しい vjmap.DbCircle({
        objectid: "71", // エンティティ ハンドル。エンティティ ハンドルが渡された場合、このエンティティを変更または削除することを意味します。 
        カラーインデックス: 2
    })、
    /*消去*/
    新しい vjmap.DbText({
        objectid: "73", // エンティティ ハンドル。エンティティ ハンドルが渡された場合、このエンティティを変更または削除することを意味します。 
        delete: true // 削除を意味します}),
    /*新しく追加されました (オブジェクトIDは渡されません)*/
    新しい vjmap.DbMText({
        位置: [14, -2],
        内容:「私は複数行のテキストです」
        カラーインデックス: 3,
        添付ファイル: 2,
        高さ: 1,
    })
]
doc.appendEntity(Ents を変更します);
 
// js コード let res = await svc.updateMap({
    mapid: "新しいバスケットボールコート",
    ファイルドキュメント: doc.toDoc(),
    マップオープンウェイ: vjmap.MapOpenWay.Memory、
    style: vjmap.openMapDarkStyle() // div の背景色が暗い場合は、暗い背景のスタイルもここに渡されます})


結果は次のとおりです。

効果を体験するには、デモアドレス https://vjmap.com/guide/newmap.html にアクセスしてください。

3. 適用シナリオ

フロントエンドにデータがあり、それをオンラインで作成したり、現在の CAD グラフィックに基づいて変更または削除したりする必要があるシナリオに適しています。たとえば、国のGeoJsonデータを取得して CAD グラフィックを作成できます。エンジニアリングの進捗図など、頻繁に変更されるデータの場合は、進捗データに基づいて DWG 図面がリアルタイムで生成されます。専門的で複雑なグラフィックの描画や編集作業の場合は、AutoCAD の二次開発にObjectARX使用することをお勧めします。

フロントエンドで JavaScript を使用して CAD グラフィックを作成および変更する方法に関するこの記事はこれで終わりです。フロントエンドで JavaScript を使用して CAD グラフィックを作成および変更する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 開発におけるデザインパターンへのファサードパターンの適用

<<:  mysql8.0.23 Linux (centos7) のインストールの完全かつ詳細なチュートリアル

>>:  例を通してBRタグとPタグの違いを理解する

推薦する

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

目次導入実装手順キャンバス環境を作成するライティングボールBallクラスを継承するMoveBallク...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

MYSQLデータベーステーブル構造の最適化方法の詳細な説明

この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...

Linux仮想マシンを作成し、仮想マシンネットワークを設定する方法に関するVMwareの詳細なチュートリアル

VMware で Linux 仮想マシンを作成し、VMware と仮想マシンのネットワークを設定する...

Linux の chown コマンドと chmod コマンドの違いの詳細な説明

Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...

MySQLはデータベースのN+1クエリ問題を解決します

導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...

Linux システム構成 (サービス制御) の詳細な紹介

目次序文1. システムサービス制御1. システムctl 2. ターゲット3. 共通システムサービス4...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...

Vueでキャッシュされたページを管理する方法

目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...

HTML における if 判断の使用

Django Web開発の過程で、HTMLを書く際にバックエンドから同じ名前のリスト変数が渡されるが...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...