Перемещение обрезанного холста

Question

Как мне пойти, если я захочу переместить мой обрезанный холст? Мне нужно переместить их в определенную область, но я не уверен, куда поместить координаты. Я все еще очень новичок в этом, и буду благодарен за любую помощь, которую я могу получить.

Я знаю, что могу сделать «var» для позиции, но так как у меня есть 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}]; 

Затем передать изображение, отсечение-координаты & требуемое смещение [х, у] в функцию, которая делает это:

• Рассчитывает минимальный x & y в массиве координат отсечения.
• Переводит (перемещает весь холст) на -minX+offsetX & -minY+offsetY. Это приведет к нормализации обрезанной области до [0,0], а затем переместите эту нормализованную область на желаемую координату смещения.
• Определяет обтравочный контур, используя неизменные координаты отсечения.
• Создает область разреза с context.clip
• Формирует изображение в [0,0]

Результат будет обрезано область изображения, которая была перемещена в требуемое смещение.

Если у вас несколько клипов, вы можете создать несколько массивов обрезных координат и передать их каждому в drawClippedImgAtXY.

Вот пример кода и демо:

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(); 
 
}

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

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