Question

下面是我的代码，当我修改对象时，我得到了变换点，所以当我传递这些变换点时，它会将对象置于略微不同的位置。我想要修改的形状点坐标，我将每个点与变换矩阵相乘并获得新的点，但是当我通过这些点绘制相同的多边形时，它稍微放置在不同的位置。所以我必须做任何配置吗？我的jsfiddle是https://jsfiddle.net/sL2np4wj/7/

<!--  fabric js code -->
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8" />
        <title>Fabric</title>
         <script src="fabric.js\dist\fabric.min.js"></script>
        <script src="js/fabric.canvasex"></script>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
       <style>
        #canvas-container {
        position: relative;
        width: 640px;
        height: 480px;
        box-shadow: 0 0 5px 1px black;
        margin: 10px auto;
        border: 5px solid transparent;
       }
      #canvas-container.over {
        border: 5px;
      }
      #images img.img_dragging {
        opacity: 0.4;
      }
    </style>
    </head>

    <body>
    <div id="images">
        <img draggable="true" id="triangle" src="Images\triangle.png" width="50" height="50"></img><br/>
        <img draggable="true" id="pentagon" src="Images\polygon.png" width="50" height="50"></img><br/>
        <img draggable="true" id="rectangle" src="Images\square.png" width="50" height="50"></img><br/>
        <img draggable="true" id="hexagon" src="Images\hexagon.png" width="50" height="50"></img><br/>
    </div>

    <div id="canvas-container">
        <canvas id="canvas" width="640" height="480"></canvas>
    </div>

    <script>
            $(document).ready(function() {
    var canvas = new fabric.Canvas('canvas');
    canvas.setBackgroundImage('file:///D:/New folder/Images/roi_image.png', canvas.renderAll.bind(canvas), {
      width: canvas.width,
      height: canvas.height,
      backgroundColor:'white',
      originX: 'left',
      originY: 'top'
    });

    function handleDragStart(e) {
        [].forEach.call(images, function (img) {
            img.classList.remove('img_dragging');
        });
        this.classList.add('img_dragging');
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault(); 
        }

        e.dataTransfer.dropEffect = 'copy';

        return false;
    }

    function handleDragEnter(e) {

        this.classList.add('over');
    }

    function handleDragLeave(e) {
        this.classList.remove('over');
    }

    function handleDrop(e) {


        if (e.stopPropagation) {
            e.stopPropagation(); 
            e.preventDefault();
        }

        var img = document.querySelector('#images img.img_dragging');

        console.log('event: ', e);
        console.log('image: ', img.id);
        if(img.id === 'triangle') {
            console.log('image: hereTriangle');

            var id="shape"+0;
            var points=[{"x":431.46311475409834,"y":182.35576211353316},{"x":366.0532786885246,"y":208.33652422706632},{"x":366.0532786885246,"y":156.375}];
            var triangle =  new fabric.Polygon(points,{
                            id:id,
                            fill: "transparent",
                            strokeWidth:0.75,
                            stroke:'rgb(255,0,0)',
                            borderColor: 'red',
                            cornerColor: 'green',
                            cornerSize: 6,
                            transparentCorners: false
                    });
            canvas.add(triangle);
            //triangle.transformMatrix = [ 1, 0, 0, 1, 0, 0 ];

         }else if(img.id === 'rectangle'){
         var points1=regularPolygonPoints(4,30);
                  var rect = new fabric.Polygon(points1,{
                            fill: "transparent",
                            strokeWidth:0.75,
                            stroke:'rgb(255,0,0)',
                            borderColor: 'red',
                            cornerColor: 'green',
                            cornerSize: 6,
                            top:e.layerY,
                            left:e.layerX,
                            transparentCorners: false
                    });
                 canvas.add(rect);           
        }else if(img.id === 'pentagon'){

        var points=regularPolygonPoints(5,30);
                  var pentagon = new fabric.Polygon(points,{
                            width: 50, 
                            height: 50,
                            fill: "transparent",
                            strokeWidth:0.25,
                            stroke:'rgb(255,0,0)',
                            borderColor: 'red',
                            cornerColor: 'green',
                            cornerSize: 6,
                            top:e.layerY,
                            left:e.layerX,
                            transparentCorners: false

                    });
                 canvas.add(pentagon);           
        }else if(img.id === 'hexagon'){

        var points=regularPolygonPoints(6,30);
                  var pentagon = new fabric.Polygon(points,{
                            fill: "transparent",
                            strokeWidth:0.25,
                            stroke:'rgb(255,0,0)',
                            borderColor: 'red',
                            cornerColor: 'green',
                            cornerSize: 6,
                            transparentCorners: false,
                            left: e.layerX, 
                            top: e.layerY
                    });
                 canvas.add(pentagon);           
        }else{

             console.log('image: here');
                 var newImage = new fabric.Image(img, {
                            width: img.width,
                            height: img.height,
                            fill:"rgb(0,0,255)",
                            borderColor: 'red',
                            cornerColor: 'green',
                            cornerSize: 6,
                            transparentCorners: false,
                            // Set the center of the new object based on the event coordinates relative
                            // to the canvas container.
                            left: e.layerX,
                            top: e.layerY
          });
                 canvas.add(newImage);
        }

        return false;
    }

    function regularPolygonPoints(sideCount,radius){
        var sweep=Math.PI*2/sideCount;
        var cx=radius;
        var cy=radius;
        var points=[];
        for(var i=0;i<sideCount;i++){
            var x=cx+radius*Math.cos(i*sweep);
            var y=cy+radius*Math.sin(i*sweep);
            console.log("VALUE OF X :"+x);
            points.push({x:x,y:y});
        }
        console.log("points  "+JSON.stringify(points));
        return(points);
    }

    function handleDragEnd(e) {
        // this/e.target is the source node.
        [].forEach.call(images, function (img) {
            img.classList.remove('img_dragging');
        });
    }




        // Bind the event listeners for the image elements
        var images = document.querySelectorAll('#images img');
        [].forEach.call(images, function (img) {
            img.addEventListener('dragstart', handleDragStart, false);
            img.addEventListener('dragend', handleDragEnd, false);
        });
        // Bind the event listeners for the canvas
        var canvasContainer = document.getElementById('canvas-container');
        canvasContainer.addEventListener('dragenter', handleDragEnter, false);
        canvasContainer.addEventListener('dragover', handleDragOver, false);
        canvasContainer.addEventListener('dragleave', handleDragLeave, false);
        canvasContainer.addEventListener('drop', handleDrop, false);

    canvas.on('object:modified',function(e){
            addDeleteBtn(e.target.oCoords.mt.x, e.target.oCoords.mt.y, e.target.width);
            var obj=e.target;

            var polygon = e.target;
            var matrix=[];
            matrix=polygon.calcTransformMatrix();
            console.log("Matrix : "+JSON.stringify(matrix));

            var translatedPoints = polygon.get('points').map(function(p) {
                  return { 
                        x: matrix[0] * p.x  + matrix[2] * p.y + matrix[4],
                        y: matrix[1] * p.x  + matrix[3] * p.y + matrix[5]
                 };

            }); 
<!-- transformed points -->

       console.log("Modified points :"+JSON.stringify(translatedPoints));


                });
        });

当我通过变换点时，为什么多边形会被错放？

0 个答案: