JSXGraph 如何用鼠标拖动圆弧答案

【问题标题】：JSXGraph How to drag an arc with the mouseJSXGraph 如何用鼠标拖动圆弧
【发布时间】：2020-09-20 13:46:40
【问题描述】：

问题是如何使圆弧可拖动。 hasInnerPoints:true 似乎无法胜任。

使用组，我可以使用中心点来拖动圆弧，同时仍然可以更改半径和角度。

正如您在执行脚本时看到的那样，可以使用蓝线作为手柄来拖动直线向量。我也想要弯曲的箭头。

    const board = JXG.JSXGraph.initBoard('jxgbox', {
      boundingbox: [-5, 5, 5, -5],
      axis: true
      });
      
    class force {
        constructor(nm,p1,p2) {
            this.p1 = board.create('point', p1, {name: ''});
            this.p2 = board.create('point', p2, {name: nm});
            this.vec = board.create('arrow',[this.p1,this.p2],
            {touchLastPoint: true});
        }
    }
    class moment {
        constructor(nm,p1,p2,p3) {
            this.p1 = board.create('point', p1, {name: ''});
            this.p2 = board.create('point', p2, {name: ''});
            this.p3 = board.create('point', p3, {name: nm});
            this.arc = board.create('arc',[this.p1,this.p2,this.p3],
              {isDraggable:true, strokeWidth:2, lastArrow:{type: 1, size: 5},
              hasInnerPoints:true});
            var g = board.create('group', [this.p1,this.p2,this.p3,this.arc]);
            g.removeTranslationPoint(this.p2);
            g.removeTranslationPoint(this.p3);
        }
    }
    var nameField = board.create('input', [-4.5, 4, 'F1','Name '], {cssStyle: 'width: 40px'});
    var button1 = board.create('button', [-2.5, 4, 'Kraft', function() {
         obs.push(new force(nameField.Value(),[3.5,4], [4.5,4]));
     }], {});
     var button2 = board.create('button', [-1.5, 4, 'Moment', function() {
         obs.push(new moment(nameField.Value(),[3.5,4], [4,3.5],[4,4.5]));
     }], {});
    
    var obs = []; 
    obs.push(new force('F1',[0,0], [1,1]));
    obs.push(new force('F2',[0,0], [-1,1]));
    obs.push(new force('q0 a',[4,0], [4,1]));
    obs.push(new moment('M0',[0,0], [1,0],[0,1]));

jsfiddle

【问题讨论】：

标签： automatic-ref-counting drag jsxgraph

【解决方案1】：

使弧线可拖动的缺失属性是fixed:false：

class moment {
    constructor(nm,p1,p2,p3) {
        this.p1 = board.create('point', p1, {name: ''});
        this.p2 = board.create('point', p2, {name: ''});
        this.p3 = board.create('point', p3, {name: nm});
        this.arc = board.create('arc',[this.p1,this.p2,this.p3],
          {fixed:true, strokeWidth:2, lastArrow:{type: 1, size: 5}});
        var g = board.create('group', [this.p1,this.p2,this.p3,this.arc]);
        g.removeTranslationPoint(this.p2);
        g.removeTranslationPoint(this.p3);
    }
}

当然，这仅适用于定义点可拖动的情况。在https://jsfiddle.net/nqxykvbf/2/观看直播

【讨论】：

感谢您的回复，这确实有效。然而我想知道我是怎么猜到的，因为弧线可以使用中心节点拖动。所以我不认为它是固定的。