Question

当我把多功能点(node)移至 mo点时,捆绑箱没有更新,以附上所有新点。我将每个矩阵、编织的坐标等地盘上几天。由于单角滑坡(3+年,无固定)而失效,因此法华人自食不果。我只想ed一gon,把一gon子(点)移到,和(或)把多角位置移走,而没有一千条码。这方面的例子没有实施轮换和转播(没有想法如何)。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
<script>
$(document).ready(function() {
  var canvas,points,shape,matrix,nodeNum=0,mouse,orgLeft=0,orgTop=0,nodeX,nodeY,nodes;
  canvas = new fabric.Canvas($( canvas )[0],{ objectCaching:false,preserveObjectStacking:true,perPixelTargetFind:true });

canvas.on( mouse:move , function(e){
  mouse = canvas.getPointer(e);
  $( #debug ).text( x: +parseInt(mouse.x)+  y: +parseInt(mouse.y));
});

canvas.on( object:moving , function (e) {
  if (e.target && e.target.get( type )== circle ) {
    var node = e.target;
    nodeX = node.getCenterPoint().x; nodeY = node.getCenterPoint().y;
    shape.points[node.nodeNum] = {x:nodeX-(shape.left-orgLeft), y:nodeY-(shape.top-orgTop)};
  }
});

canvas.on( mouse:up , function(e) {
  if (e.target && e.target.get( type )== circle ) { resetPoints(); }
});

points = [{"x":60,"y":40},{"x":100,"y":60},{"x":100,"y":100},{"x":60,"y":120},{"x":20,"y":100},{"x":20,"y":60}];
makePolygon();

function resetPoints() {
  points.forEach((point, i) => { points[i]={x:nodes[i].left,y:nodes[i].top}; });
  makePolygon(); 
}

function makePolygon(e) {
  shape = new fabric.Polygon(points,{selectable:true,objectCaching:false});
  canvas.add(shape); 
  orgLeft = shape.left; orgTop = shape.top;
  addNodes(shape);
  
  nodes.forEach((node, i) => {
    node.on( mouseover , function(e) { node.selectable = true; node.set( fill , green ); canvas.renderAll(); });
    node.on( mouseout , function(e) { node.selectable = false; node.set( fill , red ); canvas.renderAll(); });
  });
  
  shape.on( mousedown , function(e) {nodes.forEach((node, i) => { canvas.remove(node); })});
  shape.on( modified , function() { addNodes(this); resetPoints() });
}

function addNodes(shape) {
  matrix = shape.calcTransformMatrix(); nodeNum=0;
  var transformedPoints = shape.get("points").map(function(p){
    return new fabric.Point( p.x - shape.pathOffset.x, p.y - shape.pathOffset.y);
    }).map(function(p){ return fabric.util.transformPoint(p, matrix); });
  
  nodes = transformedPoints.map(function(p){
    return new fabric.Circle({nodeNum:nodeNum++,shape: node ,left:p.x,top:p.y,radius:9,fill:"red",originX:"center",originY:"center",
    hoverCursor: pointer ,objectCaching:false,hasControls:false,hasBorders:false,selectable:false,opacity:.5});
  });
  canvas.clear().add(shape).add.apply(canvas,nodes).renderAll();
};

}); //end ready
</script>
</head>

<body>
  <canvas id="canvas" class="" width="640" height="512" style="border:1px solid black"></canvas>
  <div id="debug" style="width: 640px; padding: 5px 0 0 5px;">debug:</div>
</body>
</html>

例如:example here 。

Answer 1

经过几个星期的尝试,通过法布里斯矩阵,我做了发言,并决定每修改一次整顿多角。当移动、升级、轮换、重新布局或变迁点时,它就完美地运作。或许法布里小组能够重新开展工作(在出现故障时不工作)和使用我的方法?

JSfiddle: 这里如何容易做到

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fabric.js Polygon move,flip,scale,resize,rotate by Robert W. Stewart</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fabric@latest/dist/fabric.js"></script>
<script>
    $(document).ready(function() {
  var canvas,points,shape,matrix,nodeNum=0,mouse,nodeX,nodeY,nodes;
  canvas = new fabric.Canvas($( canvas )[0],{ objectCaching:false,preserveObjectStacking:true,perPixelTargetFind:true });

canvas.on( mouse:move , function(e){
  mouse = canvas.getPointer(e);
  $( #debug ).text( x: +parseInt(mouse.x)+  y: +parseInt(mouse.y));
});

canvas.on( object:moving , function (e) {
  if (e.target && e.target.get( type )== circle ) {
    var node = e.target;
    nodeX = node.getCenterPoint().x; nodeY = node.getCenterPoint().y;
    shape.points[node.nodeNum] = {x:nodeX, y:nodeY};
  }
});

canvas.on( mouse:up , function(e) {
  if (e.target && e.target.get( type )== circle ) { resetPoints(); }
});

points = [{"x":60,"y":40},{"x":100,"y":60},{"x":100,"y":100},{"x":60,"y":120},{"x":20,"y":100},{"x":20,"y":60}];
makePolygon();

function resetPoints() {
  points.forEach((point, i) => { points[i]={x:nodes[i].left,y:nodes[i].top}; });
  makePolygon(); 
}

function makePolygon(e) {
  shape = new fabric.Polygon(points,{selectable:true,objectCaching:false});
  addNodes(shape);
  
  nodes.forEach((node, i) => {
    node.on( mouseover , function(e) { node.selectable = true; node.set( fill , green ); canvas.renderAll(); });
    node.on( mouseout , function(e) { node.selectable = false; node.set( fill , red ); canvas.renderAll(); });
  });
  
  shape.on( mousedown , function(e) {nodes.forEach((node, i) => { canvas.remove(node); })});
  shape.on( modified , function() { addNodes(this); resetPoints() });
}

function addNodes(shape) {
  matrix = shape.calcTransformMatrix(); nodeNum=0;
  var transformedPoints = shape.get("points").map(function(p){
    return new fabric.Point( p.x - shape.pathOffset.x, p.y - shape.pathOffset.y);
    }).map(function(p){ return fabric.util.transformPoint(p, matrix); });
  
  nodes = transformedPoints.map(function(p){
    return new fabric.Circle({nodeNum:nodeNum++,shape: node ,left:p.x,top:p.y,radius:9,fill:"red",originX:"center",originY:"center",
    hoverCursor: pointer ,objectCaching:false,hasControls:false,hasBorders:false,selectable:false,opacity:.5});
  });
  canvas.clear().add(shape).add.apply(canvas,nodes).renderAll();
};

}); //end ready

</script>
</head>

<body>
  <canvas id="canvas" class="" width="640" height="512" style="border:1px solid black"></canvas>
  <div id="debug" style="width: 640px; padding: 5px 0 0 5px;">debug:</div>
</body>
</html>

友情链接