Question

如果我想移动剪裁的画布，我该怎么办？我需要将它们移动到特定区域，但我不确定在哪里放置坐标。我对此仍然很陌生，并希望得到任何帮助。

我知道我可以制作一个＆＃34; var＆＃34;对于这个位置，但是由于我有6件要移动，这意味着很多var。有更简单的方法吗？代码：

<script> 
    var can=document.getElementById("NewCanvas");
    var Jctx=can.getContext("2d");
    var ctx=can.getContext("2d");
    var img = new Image();

    img.onload = function() {

    ctx.moveTo(305,307);
    ctx.lineTo(560,152);
    ctx.lineTo(450,10);
    ctx.lineTo(305,10);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0); // new image is clipped;
    }
    img.src='Prototype22.png';
    </script>

Answer 1

以下是如何将剪裁区域移动到所需的偏移量。

将剪裁坐标放在数组中：

var clips=[{x:305,y:307},{x:560,y:152},{x:450,y:10},{x:305,y:10}];

然后传递图像，剪切坐标＆amp;期望偏移[x，y]到执行此操作的函数：

计算最低x＆amp;剪切坐标数组中的y。
翻译（将整个画布移动）到-minX+offsetX＆amp; -minY+offsetY。这将将剪切区域标准化为[0,0]，然后将该标准化区域移动到所需的偏移坐标。
使用未更改的剪切坐标定义剪切路径。
使用context.clip
在[0,0]

结果将是图像的剪切区域，该区域已移动到所需的偏移。

如果您有多个剪辑，那么您可以创建多个裁剪坐标数组，并将它们分别传递到drawClippedImgAtXY。

以下是示例代码和演示：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var clips=[{x:305,y:307},{x:560,y:152},{x:450,y:10},{x:305,y:10}];

var img = new Image();
img.onload = function() {
  drawClippedImgAtXY(img,clips,100,20)
}
img.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/city-q-c-640-480-5.jpg';


function drawClippedImgAtXY(img,clipPts,x,y){
  var minX=10000000;
  var minY=10000000;
  for(var i=0;i<clipPts.length;i++){
    var pt=clipPts[i];
    if(pt.x<minX){minX=pt.x;}
    if(pt.y<minY){minY=pt.y;}
  }

  ctx.save();
  ctx.translate(-minX+x,-minY+y);
  ctx.moveTo(clipPts[0].x,clipPts[0].y);
  for(var i=1;i<clipPts.length;i++){
    ctx.lineTo(clipPts[i].x,clipPts[i].y);
  }
  ctx.clip();
  ctx.drawImage(img,0,0);
  ctx.restore();
}

＆＃13;

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<h4>Move a clipped area to x==100, y==20</h4>
<canvas id="canvas" width=600 height=400></canvas>

＆＃13;

移动剪裁的画布

1 个答案: