JSXGraph如何用鼠标拖动圆弧

问题描述

问题在于如何使弧可拖动。 hasInnerPoints：true似乎不起作用。

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

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

    const board = JXG.JSXGraph.initBoard('jxgBox',{
      boundingBox: [-5,5,-5],axis: true
      });
      
    class force {
        constructor(nm,p1,p2) {
            this.p1 = board.create('point',{name: ''});
            this.p2 = board.create('point',p2,{name: nm});
            this.vec = board.create('arrow',[this.p1,this.p2],{touchLastPoint: true});
        }
    }
    class moment {
        constructor(nm,p3) {
            this.p1 = board.create('point',{name: ''});
            this.p3 = board.create('point',p3,{name: nm});
            this.arc = board.create('arc',this.p2,this.p3],{isDraggable:true,strokeWidth:2,lastArrow:{type: 1,size: 5},hasInnerPoints:true});
            var g = board.create('group',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,'Kraft',function() {
         obs.push(new force(nameField.Value(),[3.5,4],[4.5,4]));
     }],{});
     var button2 = board.create('button',[-1.5,'Moment',function() {
         obs.push(new moment(nameField.Value(),[4,3.5],4.5]));
     }],{});
    
    var obs = []; 
    obs.push(new force('F1',[0,0],[1,1]));
    obs.push(new force('F2',[-1,1]));
    obs.push(new force('q0 a',1]));
    obs.push(new moment('M0',1]));

jsfiddle

解决方法

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

class moment {
    constructor(nm,p1,p2,p3) {
        this.p1 = board.create('point',{name: ''});
        this.p2 = board.create('point',{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.p3,this.arc]);
        g.removeTranslationPoint(this.p2);
        g.removeTranslationPoint(this.p3);
    }
}

当然，这仅在定义点可拖动时才有效。 在GitHub repo

现场观看