使用JSXGraph模拟机械臂运动(一)

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.bootcdn.net/ajax/libs/jsxgraph/1.4.0/jsxgraph.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jsxgraph/1.4.0/jsxgraphcore.js"></script>
    <style>
    .collapsible {
      background-color: #777;
      color: white;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
    }

    .active, .collapsible:hover {
      background-color: #555;
    }

    .collapsible:after {
      content: '\002B';
      color: white;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

    .content {
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      background-color: #f1f1f1;
    }

    xmp {
      font-family: Consolas,"courier new";
      color: green;
      background-color: #f1f1f1;
      padding: 2px;
      font-size: 90%;
    }
    </style>
</head>

<body>
<h2>Linkage mechanism simulation</h2>
<button class="collapsible">Show HTML</button>

<div class="content">
<pre><xmp>
<!DOCTYPE html>
    <head>
        <link href="https://cdn.bootcdn.net/ajax/libs/jsxgraph/1.4.0/jsxgraph.css" rel="stylesheet">
        <script src="https://cdn.bootcdn.net/ajax/libs/jsxgraph/1.4.0/jsxgraphcore.js"></script>
   </head>

    <body>
        <h2>Linkage mechanism simulation</h2>
        <form>
            Select a mode:<br>
            <input type="radio" name="mode" id="forward" onchange="forward_mode()" checked="true">Forward kinematics<br>
            <input type="radio" name="mode" id="inverse" onchange="inverse_mode()">Inverse kinematics<br>
        </form>

        <!-- <div>Other settings:<br>
            <input type="checkbox" id="trajectory" defaultChecked="false" onchange="toggle_trajectory()">Show trajectory<br><br>
        </div> -->

        <div id="box" class="jxgbox" style="width:500px; height:500px;"></div> 

        <script type="text/javascript">
            var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3], axis:true, keepAspectRatio:true,
                 showCopyright:true, showNavigation:false, showScreenshot:true, showClearTraces:true});

            // Create point elements
            var p1 = board.create('point',[0,0], {name:'A',size:8, fixed:true, face:'^', highlight:false});
            var p2 = board.create('point',[0,1], {name:'B',size:4, fixed:false, trace:false, highlight:false});
            var p3 = board.create('point',[0,2], {name:'E',size:0.1, fixed:false, trace:false, highlight:false});
            var t = board.create('point',[function(){return p3.X();}, function(){return p3.Y();}],
                                 {name:'',size:8, face:'cross', highlightStrokeColor:'yellow'}); 
            
            // Restrict the target point to limited area by limited segment length
            board.create('segment', [p1, t, function(){ return Math.min(2, t.Dist(p1));}],{strokeWidth:0, highlight:false});
            // t.on('drag', function(e){});

            // Create circle elements
            board.create('circle', [p1, 2], {fillColor: 'green', fillOpacity:0.1, strokeWidth:0, highlight:false});

            // Create segment elements
            var l1 = board.create('segment', [p1, p2, 1], {strokeWidth:6, highlight:false});
            var l2 = board.create('segment', [p2, p3, 1], {strokeWidth:6, highlight:false});

            var checkbox = board.create('checkbox', [0.8, -2.8, 'Show trajectory'],{fontSize:14});
            //JXG.addEvent(obj, type, fn, owner)  Adds an event listener to a DOM element.
            JXG.addEvent(checkbox.rendNodeCheckbox, 'change',
                function() {
                    if (this.Value()) 
                        p3.setAttribute({trace:true});
                    else 
                        p3.setAttribute({trace:false});
                }, checkbox);


            function forward_mode()
            {
                console.log('Change to forward kinematics mode');
                p3.free();
                t.addConstraint([function(){return p3.X();}, function(){return p3.Y();}]); 
                board.update() 
            };

            function inverse_mode()
            {
                console.log('Change to inverse kinematics mode');
                t.free();
                p3.addConstraint([function(){return t.X();}, function(){return t.Y();}]);
                board.update() 
            };
   
        </script>
    </body>
</html>
</xmp></pre>
</div>

<form>
    Select a mode:<br>
    <input type="radio" name="mode" id="forward" onchange="forward_mode()" checked="true">Forward kinematics<br>
    <input type="radio" name="mode" id="inverse" onchange="inverse_mode()">Inverse kinematics<br>
</form>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

<div id="box" class="jxgbox" style="width:500px; height:500px;"></div> 
    <script type="text/javascript">
        var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3], axis:true, keepAspectRatio:true,
             showCopyright:true, showNavigation:false, showScreenshot:true, showClearTraces:true});

        // Create point elements
        var p1 = board.create('point',[0,0], {name:'A',size:8, fixed:true, face:'^', highlight:false});
        var p2 = board.create('point',[0,1], {name:'B',size:4, fixed:false, trace:false, highlight:false});
        var p3 = board.create('point',[0,2], {name:'E',size:0.1, fixed:false, trace:false, highlight:false});
        var t = board.create('point',[function(){return p3.X();}, function(){return p3.Y();}],
                             {name:'',size:8, face:'cross', highlightStrokeColor:'yellow'}); 
        
        // Restrict the target point to limited area by limited segment length
        board.create('segment', [p1, t, function(){ return Math.min(2, t.Dist(p1));}],{strokeWidth:0, highlight:false});
        // t.on('drag', function(e){});

        // Create circle elements
        board.create('circle', [p1, 2], {fillColor: 'green', fillOpacity:0.1, strokeWidth:0, highlight:false});

        // Create segment elements
        var l1 = board.create('segment', [p1, p2, 1], {strokeWidth:6, highlight:false});
        var l2 = board.create('segment', [p2, p3, 1], {strokeWidth:6, highlight:false});

        var checkbox = board.create('checkbox', [0.8, -2.8, 'Show trajectory'],{fontSize:14});
        //JXG.addEvent(obj, type, fn, owner)  Adds an event listener to a DOM element.
        JXG.addEvent(checkbox.rendNodeCheckbox, 'change',
            function() {
                if (this.Value()) 
                    p3.setAttribute({trace:true});
                else 
                    p3.setAttribute({trace:false});
            }, checkbox);


        function forward_mode()
        {
            console.log('Change to forward kinematics mode');
            p3.free();
            t.addConstraint([function(){return p3.X();}, function(){return p3.Y();}]); 
            board.update() 
        };

        function inverse_mode()
        {
            console.log('Change to inverse kinematics mode');
            t.free();
            p3.addConstraint([function(){return t.X();}, function(){return t.Y();}]);
            board.update() 
        };

    </script>
</body>
</html>
View Code

博客园不允许在博文内容中嵌入js代码运行,可以将上面代码保存为html文件用浏览器打开。下面是使用JSXGraph模拟二连杆机构正逆运动学的动图:

 

参考:
JSXGraph
在你的web页面中使用JSXGraph

posted @ 2022-01-19 17:34  XXX已失联  阅读(57)  评论(0编辑  收藏  举报