Question

我想绘制一个带孔的多边形，我的方法首先绘制多边形，然后绘制圆形然后将它们分组，结果是它有效，但圆圈不在正确的位置。我的函数（这是绘制多边形）

＆＃13;

/**
 * Created by XJ on 2017/9/13.
 */
var polyWithHole=false;
var polyWithHoleMode=false;
var polyWithHoleGroup;
prototypefabric.polyWithHole = {
    drawPolyWithHole : function() {
        polyWithHoleMode = true;
        pointArray = new Array();
        lineArray = new Array();
        activeLine;
    },
    addPoint : function(options) {
        var random = Math.floor(Math.random() * (max - min + 1)) + min;
        var id = new Date().getTime() + random;
        var circle = new fabric.Circle({
            radius: 5,
            fill: '#ffffff',
            stroke: '#333333',
            strokeWidth: 0.5,
            left: (options.e.layerX/canvas.getZoom()),
            top: (options.e.layerY/canvas.getZoom()),
            selectable: false,
            hasBorders: false,
            hasControls: false,
            originX:'center',
            originY:'center',
            id:id
        });
        if(pointArray.length == 0){
            circle.set({
                fill:'red'
            })
        }
        var points = [(options.e.layerX/canvas.getZoom()),(options.e.layerY/canvas.getZoom()),(options.e.layerX/canvas.getZoom()),(options.e.layerY/canvas.getZoom())];
        line = new fabric.Line(points, {
            strokeWidth: 2,
            fill: '#999999',
            stroke: '#999999',
            class:'line',
            originX:'center',
            originY:'center',
            selectable: false,
            hasBorders: false,
            hasControls: false,
            evented: false
        });

        if(activeShape){
            var pos = canvas.getPointer(options.e);
            var points = activeShape.get("points");
            //console.log(points+"Lpointsin")
            points.push({
                x: pos.x,
                y: pos.y
            });
            var polygon = new fabric.Polygon(points,{
                stroke:'#333333',
                strokeWidth:1,
                fill: '#cccccc',
                opacity: 0.1,
                selectable: false,
                hasBorders: false,
                hasControls: false,
                evented: false
            });
            canvas.remove(activeShape);
            canvas.add(polygon);
            activeShape = polygon;
            canvas.renderAll();
        }
        else{
            var polyPoint = [{x:(options.e.layerX/canvas.getZoom()),y:(options.e.layerY/canvas.getZoom())}];
            var polygon = new fabric.Polygon(polyPoint,{
                stroke:'#333333',
                strokeWidth:1,
                fill: '#cccccc',
                opacity: 0.1,
                selectable: false,
                hasBorders: false,
                hasControls: false,
                evented: false
            });
            activeShape = polygon;
            canvas.add(polygon);
        }
        activeLine = line;
        pointArray.push(circle);
        lineArray.push(line);

        canvas.add(line);
        canvas.add(circle);
        canvas.selection = false;
    },
    generatePolyWithHole : function(pointArray){
        var points = new Array();
        $.each(pointArray,function(index,point){
            points.push({
                x:point.left,
                y:point.top
            });
            canvas.remove(point);
        });
        $.each(lineArray,function(index,line){
            canvas.remove(line);
        });
        canvas.remove(activeShape).remove(activeLine);
        var polygon = new fabric.Polygon(points,{
            stroke:'#333333',
            strokeWidth:0.5,
            fill: '#ccc',
            opacity: 1,
            selectable: false,
            hasBorders: false,
            hasControls: false
        });

        polyWithHoleGroup=new fabric.Group([polygon ],{
            //stroke:'#333333',
            //strokeWidth:0.5,
            //fill: 'red',
            //opacity: 1,
            //selectable: false,
            //hasBorders: false,
            //hasControls: false
            originX: 'center',
            originY: 'center'
            //left:'left',
            //top:'top'
        });
        polyWithHoleGroupLeft=polyWithHoleGroup.left;
        polyWithHoleGroupTop=polyWithHoleGroup.top;
        //console.log(polyWithHoleGroup.left+";"+polyWithHoleGroup.top)
        canvas.add(polyWithHoleGroup);

        polygonMode=false;
        activeLine = null;
        activeShape = null;
        polyWithHoleMode = false;  //stop draw PolyWithHole
        polyWithHole=true;  //add C and P
    }

};

＆＃13;

/**
 * Created by XJ on 2017/9/11.
 */
var circle,origX,origY;
var addPolyWithHole=false;
prototypefabric.circle={
    drawCircle:function(){
        circleMode=true;
    },
    addCenterPoint:function(options){
        var pointer=canvas.getPointer(options.e);
        console.log(pointer.x);
        origX=pointer.x;
        origY=pointer.y;
        circle= new fabric.Circle({
            radius: 1,
            fill: '',
            stroke: 'red',
            strokeWidth: 1,
            left: pointer.x,
            top: pointer.y,
            originX:'center',
            originY:'center',
            selectable: false,
            hasBorders: false,
            hasControls: false
        });
        canvas.add(circle);

    },
    generateCircle:function(options){
        var pointer=canvas.getPointer(options.e);
        var R=Calculate.lineLength(origX,origY,pointer.x,pointer.y).toFixed(2);
        text=new fabric.Text('Radius'+R+'('+origX.toFixed(2)+','+origY.toFixed(2)+')',{left:pointer.x,top:pointer.y,fontSize:12,hasBorders: false,
            hasControls: false});
        canvas.add(text);

        if(polyWithHole || addPolyWithHole){
            circle.set({
                radius:Calculate.lineLength(origX,origY,pointer.x,pointer.y).toFixed(2),
                selectable: true,
                hasBorders: false,
                hasControls: false,
                strokeWidth: 0,
                fill:'yellow',
                originX: 'center',
                originY: 'center',
                left:pointer.x,
                top:pointer.y
                //left:options.e.layerX/canvas.getZoom(),
                //top:options.e.layerY/canvas.getZoom()
            });
            polyWithHole=false;
            addPolyWithHole=true;
        }
        else{
            circle.set({
                radius:Calculate.lineLength(origX,origY,pointer.x,pointer.y).toFixed(2),
                selectable: true,
                hasBorders: false,
                hasControls: false
        });
        }
        polyWithHoleGroup.add(circle);
        console.log(polyWithHoleGroup.getObjects());
        if(polyWithHole || addPolyWithHole){ canvas.remove(circle);}
        canvas.selection = true;
    }

}


/**
 * Created by XJ on 2017/9/9.
 */

var min = 99;
var max = 999999;
var polygonMode = false;
var lineMode=false;
var circleMode=false;
var arcMode=false;
var pointArray = new Array();
var lineArray = new Array();
var points=new Array();
var activeLine;
var activeShape = false;
var drawStop=false;
var startX, startY;
var moveX,moveY;
//var centerPoint;
var text;
var canvas;
var isCircleDown=false;
var isArcDown=false;
//var setGroupActive=false;
$(function(){
    prototypefabric.initCanvas();
    
    $('.create-polyWithHole').click(function() {
        polygonMode = false;
        lineMode=false;
        circleMode=false;
        arcMode=false;
        prototypefabric.polyWithHole.drawPolyWithHole();
    });
    $('.create-polyWithHole-addC').click(function() {
        polygonMode = false;
        lineMode=false;
        circleMode=false;
        arcMode=false;
        setGroupActive.rSet();
        if(polyWithHole || addPolyWithHole){
            prototypefabric.circle.drawCircle();
        }
    });
   
    
});

var prototypefabric = new function () {
    this.initCanvas = function () {
        canvas = window._canvas = new fabric.Canvas('c');
        canvas.setWidth($("#mycanvas").width());
        canvas.setHeight($(window).height()-$(".div_header").height()-$(".canvas_header").height()-$(".canvas_footer").height());
        //canvas.selection = false;

        canvas.on('mouse:down', function (options) {
            startX=options.e.x;
            startY=options.e.y;
          
            if(polyWithHoleMode){
                prototypefabric.polyWithHole.addPoint(options);
            }
            if(polyWithHoleMode&&options.target && options.target.id == pointArray[0].id){
                prototypefabric.polyWithHole.generatePolyWithHole(pointArray);
            }
            
            if(circleMode){
                isCircleDown=true;  //if draw C
                prototypefabric.circle.addCenterPoint(options);
            }
            
        });
        canvas.on('mouse:up', function (options) {
            circleMode=false;
            arcMode=false;
            isCircleDown=false;
            isArcDown=false;

        });
        canvas.on('mouse:move', function (options) {
            moveX=options.e.x;
            moveY=options.e.y;
            canvas.remove(text);
            canvas.renderAll();

            if(activeLine && activeLine.class == "line"){
                var pointer = canvas.getPointer(options.e);
                activeLine.set({ x2: pointer.x, y2: pointer.y });

                var px=Calculate.lineLength(startX,startY,moveX,moveY).toFixed(2);
                text=new fabric.Text('Length'+px+'('+pointer.x.toFixed(2)+','+pointer.y.toFixed(2)+')',{left:pointer.x,top:pointer.y,fontSize:12});
                canvas.add(text);

                if(polygonMode || polyWithHoleMode){
                    var points = activeShape.get("points");
                    points[pointArray.length] = {
                        x:pointer.x,
                        y:pointer.y
                    };
                    activeShape.set({
                        points: points
                    });
                };
                canvas.renderAll();
            }


            if(circleMode&&isCircleDown){
                prototypefabric.circle.generateCircle(options);
                canvas.renderAll();
                setGroupActive.doSet();
            }
            
            canvas.renderAll();
        });
    };
};
var Calculate={
    lineLength:function(x1,y1,x2,y2){
        return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2))
    }
};
var setGroupActive={
    doSet:function(){
        polyWithHoleGroup.set({
                selectable: true
            })
        console.log("setin?")
    },
    rSet:function(){
        polyWithHoleGroup.set({
                selectable: false,
                originX: 'center',
                originY: 'center'
            })
        console.log("setin?")
    }
}

＆＃13;

这是绘制圆圈和鼠标事件，任何人都可以告诉我如何纠正它，我没有方法

当我绘制一个polygonWithHole时，圆圈不在正确的位置

0 个答案: