JSXGraph如何用鼠标拖动圆弧

Question

问题是如何使圆弧可拖动。 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

Answer 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/

现场观看

JSXGraph如何用鼠标拖动圆弧

JSXGraph How to drag an arc with the mouse

automatic-ref-counting

drag

jsxgraph