Uma função reutilizável para recortar imagens em polígonos usando a tela html5

Question

Sep 06, 2014, 05:27 PM

Uma função reutilizável para recortar imagens em polígonos usando a tela html5

Acho que o título da postagem pode precisar de edição, mas por enquanto não sei onde estão os problemas. Li páginas e respostas a perguntas semelhantes, aqui e em outros lugares. A resposta do One Stack Overflow é especialmente próxima, mas eu não entendo.

Eu quero uma função, desenhar polígonos na tela nas coordenadas desejadas e preenchê-los com alguma imagem de fundo carregada de um arquivo (grande o suficiente para que nenhum mosaico seja necessário). Triângulos seria bom para um teste. Aparentemente, devo usar drawImage e clip e, para dar uma borda ao polígono, posso reutilizar o mesmo caminho para o clipe e o traçado. Também aparentemente eu deveria manter a ordem de

- define path
- save
- clip
- drawImage
- restore
- stroke.

Leia também em algum lugar que basta carregar a imagem uma vez. (Se você quiser que eu cite as fontes de todas essas suposições, procurarei onde as vi. A maioria delas no Stack Overflow)

Caso contrário, o HTML está vazio

<body onload = "main ();"></body>

Primeira abordagem, fingindo que o navegador aguardará o carregamento da imagem:

var ctx, img;
var image_path = 'bg.jpg';

function main () {

    var CANVAS_SIZE = 600;
    var view_field_cnv = document.createElement ('canvas');
    view_field_cnv.width  = CANVAS_SIZE;
    view_field_cnv.height = CANVAS_SIZE;
    view_field_cnv.style.border = "1px solid";
    document.body.appendChild (view_field_cnv);
    ctx = view_field_cnv.getContext ('2d');

    img = document.createElement ('img');
    img.src = image_path;

    place_triangle (0, 0);
    place_triangle (300, 300);
    place_triangle (500, 500);
    place_triangle (0, 0);

}

function place_triangle (x, y) {

    console.log (x, y);

    ctx.beginPath ();
    ctx.moveTo (x + 10, y);
    ctx.lineTo (x + 110, y);
    ctx.lineTo (x + 60, y + 40);
    ctx.closePath ();

    img = document.createElement ('img');
    img.src = image_path;

    ctx.save ();
    ctx.clip ();
    ctx.drawImage (img, x, y);
    ctx.restore ();
    ctx.stroke ();


}

Isso desenha todos os três triângulos, mas nenhuma imagem cortada.

Segunda tentativa, com drawImage dentro de image.onload:

var ctx;
var image_path = 'bg.jpg';

function main () {

    var CANVAS_SIZE = 600;
    var view_field_cnv = document.createElement ('canvas');
    view_field_cnv.width  = CANVAS_SIZE;
    view_field_cnv.height = CANVAS_SIZE;
    view_field_cnv.style.border = "1px solid";
    document.body.appendChild (view_field_cnv);
    ctx = view_field_cnv.getContext ('2d');

    place_triangle (0, 0);
    place_triangle (300, 300);
    place_triangle (500, 500);
    place_triangle (0, 0);

}

function place_triangle (x, y) {

    console.log (x, y);

    var img;

    ctx.beginPath ();
    ctx.moveTo (x + 10, y);
    ctx.lineTo (x + 110, y);
    ctx.lineTo (x + 60, y + 40);
    ctx.closePath ();

    img = document.createElement ('img');
    img.src = image_path;
    img.onload = function () {

        ctx.save ();
        ctx.clip ();
        ctx.drawImage (img, x, y);
        ctx.restore ();
        ctx.stroke ();
    }

}

Este desenha a imagem cortada, mas apenas um triângulo, o último. Apenas comentar sobre salvar e restaurar não ajuda.

Portanto, não entendo carregar imagens, salvar, restaurar e provavelmente um milhão de outras coisas. Onde estão os insetos?