CAD开发者社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

AutoCAD 2025 开发者帮助

实现 AutoCAD 选项板的步骤

2024-5-18 19:14| 发布者: admin| 查看: 20| 评论: 0|原作者: admin|来自: AutoCAD

实现 AutoCAD 选项板的步骤

实现 AutoCAD 选项板的步骤

此 AutoCAD JavaScript 教程演示了如何使用 HTML5 实现调色板,以及如何实现用户与 JavaScript 的交互,以执行在 AutoCAD 中绘制瞬态矩形或圆形等任务。

此 AutoCAD JavaScript 教程演示了如何注册新的透明命令并缩放到所选对象的范围。

在本教程中,您将:

  • 使用 C 在 Manasged .NET 中注册自定义命令#

  • 将 HTML5 文件加载到调色板中

  • 绘制瞬态图形;矩形和圆形使用函数getExtents

  • 使用函数缩放到所选对象的范围zoomExtents

    1. 使用以下 HTML5 和 JavaScript 代码创建在单击调色板上的按钮时调用的命令(JavaScript 函数)以及各种选择方法:
<html>
<head>
    <title>Draw a transient circle or rectangle</title>
    <script type="text/javascript" src="https://df-prod.autocad360.com/jsapi/v4/Autodesk.AutoCAD.js"></script>
    <script type="text/javascript">
            // Some global variables

            // The cursor for "OnMouseOver", as specified in the UI
            var cursor = ' ';

            // Colors for our transient definition, as they are
            // presented to the user in the UI
            var colors = new Array();
            colors['Red'] = "#ff0000";
            colors['Yellow'] = "#ffff00";
            colors['Green'] = "#00ff00";
            colors['Cyan'] = "#00ffff";
            colors['Blue'] = "#0000ff";
            colors['Magenta'] = "#ff00ff";
            colors['White'] = "#ffffff";

            // Some point information, as populated by user prompting
            var pt0 = new Array();
            var pt1 = new Array();
            var pt2 = new Array();
            var pt3 = new Array();

            // Function used to create the XML definition for the
            // transient rectangular polyline we want to draw
            function createPolyline()
            {
                // Get some parameters from the page
                var color = document.getElementById('ColCB').value;
                var linetype = document.getElementById('LTCB').value;
                var lineweight = document.getElementById('LWCB').value;
                var filled = document.getElementById('Filled').checked;
                var cursorType = document.getElementById('Cursor').value;
                if (cursorType == 'None')
                    cursor = ' ';
                else
                    cursor = 'cursor="' + cursorType + '"';

                // Set the other rectangle corners based on the specified corners
                pt1[0] = pt0[0];
                pt1[1] = pt2[1];
                pt1[2] = pt0[2];

                pt3[0] = pt2[0];
                pt3[1] = pt0[1];
                pt3[2] = pt0[2];

                var drawable = '<?xml version="1.0" encoding="utf-8"?>' +
                    '<drawable xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd" ' +
                    'xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd" ' +
                    't:onmouseover ="onmouseover" ' + 
                    cursor + '>' + 
                    '<graphics color="' + colors[color] + '" ' + 
                    'id="id1" lineweight="' + lineweight + '" ' +
                    'linetype="' + linetype  + '" ' +
                    'filled="' + filled + '">' + 
                    '<polyline isClosed="true">' + 
                    '<vertices>' +
                    '<vertex>' + pt0.toString() + '</vertex>' + 
                    '<vertex>' + pt1.toString() + '</vertex>' + 
                    '<vertex>' + pt2.toString() + '</vertex>' + 
                    '<vertex>' + pt3.toString() + '</vertex>' + 
                    '</vertices>' + 
                    '</polyline>' + 
                    '</graphics>' + 
                    '</drawable>';

                return drawable;
            }

            // Function used to create the XML definition for the
            // transient circle we want to draw
            function createCircle() {
                // Get some parameters from the page
                var color = document.getElementById('ColCB').value;
                var linetype = document.getElementById('LTCB').value;
                var lineweight = document.getElementById('LWCB').value;
                var filled = document.getElementById('Filled').checked;
                var cursorType = document.getElementById('Cursor').value;

                if (cursorType == 'None')
                    cursor = ' ';
                else
                    cursor = 'cursor="' + cursorType + '"';

                // Use Pythagoras' theorem to get the radius of the circle
                // based on the points specified
                var radius = Math.sqrt(Math.pow(pt2[0] - pt0[0], 2) +
                                       Math.pow(pt2[1] - pt0[1], 2)
                );

                var drawable = '<?xml version="1.0" encoding="utf-8"?>' +
                    '<drawable xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd" ' +
                    'xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd" ' +
                    't:onmouseover="onmouseover" ' +
                    cursor + '>' + 
                    '<graphics color="' + colors[color] + '" ' +
                    'id="id1" lineweight="' + lineweight + '" ' +
                    'linetype="' + linetype + '" ' +
                    'filled="' + filled + '">' + 
                    '<circle center="' + pt0.toString() + '" ' +
                    'radius="' + radius.toString() + '" ' + 
                    'normal="1,0,0"/>' + 
                    '</graphics>' + 
                    '</drawable>';

                    return drawable;
                }

                // Function used to draw a rectangular transient object
                function drawRectangularTransient()
                {
                    function on1stComplete(args)
                    {
                        var res = args;
                        if (res && res.value)
                        {
                            pt0[0] = res.value.x;
                            pt0[1] = res.value.y;
                            pt0[2] = res.value.z;

                            // Once we have the first point, get the other corner
                            var pco = new Acad.PromptCornerOptions(
                                   'Pick second corner point',
                                   new Acad.Point3d(pt0[0], pt0[1], pt0[2])
                            );

                            Acad.Editor.getCorner(pco).then(on2ndComplete, onError);
                        }
                    }

                    function on2ndComplete(args)
                    {
                        var res = args;
                        if (res && res.value)
                        {
                            pt2[0] = res.value.x;
                            pt2[1] = res.value.y;
                            pt2[2] = res.value.z;

                            // And when we have both first and second,
                            // we can generate the XML for the transient
                            // and ask for it to be drawn
                            var doc = Acad.Application.activedocument;
                            var drawable = createPolyline();
                            var tran = new Acad.Transient();
                            doc.transientManager.addTransient(tran, drawable).then(onCreatedTransientRec, onErrorTransientRec);
                        }
                    }

                    function onError(args) {
                        alert('Unable to specify point: ' + args);
                    }

                    function onCreatedTransientRec(args) {
                        alert('Created rectangular transient: ' + args);
                    }

                    function onErrorTransientRec(args) {
                        alert('Unable to create rectangular transient: ' + args);
                    }

                    // The body of our function, where we get the first point
                    var ppo =
                        new Acad.PromptPointOptions(
                           'Pick first corner point',
                           new Acad.Point3d(0, 0, 0)
                        );
                    Acad.Editor.getPoint(ppo).then(on1stComplete, onError);
                }

                // Function used to draw a circle transient object
                function drawCircularTransient()
                {
                    function on1stComplete(args)
                    {
                        var res = args;
                        if (res && res.value)
                        {
                            pt0[0] = res.value.x;
                            pt0[1] = res.value.y;
                            pt0[2] = res.value.z;

                            // Once we have the center point, get one on the
                            // circumference
                            var ppo = new Acad.PromptPointOptions('Pick point on circle',
                                new Acad.Point3d(pt0[0], pt0[1], pt0[2])
                            );
                            ppo.useBasePoint = true;

                            Acad.Editor.getPoint(ppo).then(on2ndComplete, onError);
                        }
                    }

                    function on2ndComplete(args) {

                        var res = args;
                        if (res && res.value) {
                            pt2[0] = res.value.x;
                            pt2[1] = res.value.y;
                            pt2[2] = res.value.z;

                            // And when we have both first and second,
                            // we can generate the XML for the transient
                            // and ask for it to be drawn
                            var doc = Acad.Application.activedocument;
                            var drawable = createCircle();
                            var tran = new Acad.Transient();
                            doc.transientManager.addTransient(tran, drawable).then(onCreatedTransientCirc, onErrorTransientCirc);
                        }
                    }

                    function onError(args) {
                        alert('Unable to specify point: ' + args);
                    }                        

                    function onCreatedTransientCirc(args) {
                        alert('Created circle transient: ' + args);
                    }

                    function onErrorTransientCirc(args) {
                        alert('Unable to create circle transient: ' + args);
                    }

                    // The body of our function, where we get the first point
                    var ppo =
                        new Acad.PromptPointOptions(
                               'Pick center point',
                               new Acad.Point3d(0, 0, 0)
                            );

                    Acad.Editor.getPoint(ppo).then(on1stComplete, onError);
                }
    </script>

    <style type="text/css">
        td,
        body {
            font-family: sans-serif;
            font-size: 10pt;
        }

        body {
            background-color: #686868;
            padding: 0;
            margin: 5px 5px 5px 5px;
            color: #FFF;
        }

        textarea {
            font-family: Consolas;
            font-size: 8pt;
        }
    </style>
</head>

<body>
        <h3>Transient circle or rectangle</h3>
    <table border="0">
        <tr>
            <td align='right'>Color</td>
            <td>
                <select id='ColCB'>
                    <option selected="selected">Red</option>
                    <option>Yellow</option>
                    <option>Green</option>
                    <option>Cyan</option>
                    <option>Blue</option>
                    <option>Magenta</option>
                    <option>White</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align='right'>LineType</td>
            <td>
                <select id='LTCB'>
                    <option selected="selected">LineTypeSolid</option>
                    <option>Dashed</option>
                    <option>Dotted</option>
                    <option>Dash_Dot</option>
                    <option>Short_Dash</option>
                    <option>Medium_Dash</option>
                    <option>Long_Dash</option>
                    <option>Short_Dash_X2</option>
                    <option>Medium_Dash_X2</option>
                    <option>Long_Dash_X2</option>
                    <option>Medium_Long_Dash</option>
                    <option>Medium_Dash_Short_Dash_Short_Dash</option>
                    <option>Long_Dash_Short_Dash</option>
                    <option>Long_Dash_Dot_Dot</option>
                    <option>Long_Dash_Dot</option>
                    <option>Medium_Dash_Dot_Short_Dash_Dot</option>
                    <option>Sparse_Dot</option>
                    <option>Solid_6_Pixels_Blank_6_Pixels</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align='right'>LineWeight</td>
            <td>
                <select id='LWCB'>
                    <option>0</option>
                    <option>5</option>
                    <option>9</option>
                    <option>13</option>
                    <option>15</option>
                    <option>18</option>
                    <option>20</option>
                    <option>25</option>
                    <option selected="selected">30</option>
                    <option>35</option>
                    <option>40</option>
                    <option>50</option>
                    <option>53</option>
                    <option>60</option>
                    <option>70</option>
                    <option>80</option>
                    <option>90</option>
                    <option>100</option>
                    <option>106</option>
                    <option>120</option>
                    <option>140</option>
                    <option>158</option>
                    <option>200</option>
                    <option>211</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align='right'>Filled</td>
            <td><input type='checkbox' id='Filled' /></td>
        </tr>
        <tr>
            <td align='right'>Cursor</td>
            <td>
                <select id='Cursor' title='Cursor to be displayed on hover'>
                    <option selected="selected">None</option>
                    <option>None</option>
                    <option>Arrow</option>
                    <option>Ibeam</option>
                    <option>Wait</option>
                    <option>Cross</option>
                    <option>UpArrow</option>
                    <option>SizeNWSE</option>
                    <option>SizeNESW</option>
                    <option>SizeWE</option>
                    <option>SizeNS</option>
                    <option>SizeAll</option>
                    <option>No</option>
                    <option>Hand</option>
                    <option>AppStarting</option>
                    <option>Help</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>&nbsp;</th>
            <td>
                <input type='button' style="width: 220px" onclick='drawRectangularTransient()'
                       value='Draw Rectangle Transient' />
            </td>
        </tr>
        <tr>
            <th>&nbsp;</th>
            <td>
                <input type='button' style="width: 220px" onclick='drawCircularTransient()'
                       value='Draw Circle Transient' />
            </td>
        </tr>
    </table>
</body>
</html>
  1. 将文件另存为 TransientPalette.html

  2. 在 Microsoft Visual Studio 中创建或打开 AutoCAD Managed .NET 项目。然后添加以下 C# 代码以将 HTML5 加载到调色板中。

    注意:请确保将 https://mywebsite.com/files 替换为 TransientPalette.html 文件的位置。
    using Autodesk.AutoCAD.Runtime;
    using Autodesk.AutoCAD.Windows;
    using System;
    
    namespace JavaScriptLoader
    {
       public class Commands
       {
          static PaletteSet _ps = null;
    
          [CommandMethod("JSP")]
          public void JavaScriptPalette()
          {
             if (_ps == null)
             {
                _ps = new PaletteSet(
                             "JavaScript Demo",
                             new Guid("61135FFD-EE9A-4A5D-B3E1-993AB17E93BD")
                );
             }
    
             if (_ps.Count != 0)
             {
                _ps[0].PaletteSet.Remove(0);
             }
    
             var p =
                _ps.Add(
                   "JavaScript Test",
                   new Uri("https://mywebsite.com/files/TransientPalette.html")
                );
    
              _ps.Visible = true;
          }
       }
    }
  3. 编译项目并将生成的 DLL 部件加载到 AutoCAD 中。

  4. 在AutoCAD命令提示符下,输入jsp

    “示例选项板”现在应显示在AutoCAD中。指定要绘制的矩形或圆形瞬态对象的选项,然后单击相应的按钮以绘制该对象。

    AutoCAD中使用JavaScript和HTML图像的新调色板


路过

雷人

握手

鲜花

鸡蛋

最新评论

QQ|Archiver|CAD开发者社区 ( 苏ICP备2022047690号-1 )

GMT+8, 2024-6-27 16:07

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

返回顶部