4

Tenho um código que ao abrir as informações do relatório, é criado em Canvas um retângulo em cima de cada imagem. Porém, essas imagens tem tamanhos diferentes, mas o canvas continua o mesmo tamanho. Preciso fazer com que se a área da imagem for 1 o canvas seja desenhado menor, se for 2 desenhe o canvas maior e assim sucessivamente. Meu código está em MVC.

Essa parte é aonde cria o Canvas em cima da imagem:

<script type="text/javascript">
        function init(i) {
            var img = document.getElementById("foto" + i);
            var cs = getComputedStyle(img);
            var width = parseInt(cs.getPropertyValue('width'));
            var height = parseInt(cs.getPropertyValue('height'));
            $('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
            drawImg(img, cs, width, height, i);
        }
        function drawImg(img, cs, width, height, i) {
            var myCanvas = 'myCanvas' + i;
            var canvas = document.getElementById(myCanvas);
            var c = document.getElementById(myCanvas);
            var ctx = c.getContext("2d");
            var context = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            drawRetangle(context, width, height);
        }
        function drawRetangle(context, width, height) {
            position_x = parseInt(width) / 2;
            position_y = parseInt(height) / 2;

            position_x = parseInt(position_x) - 20;
            position_y = parseInt(position_y) - 17;

            context.beginPath();
            context.rect(position_x, position_y, 39, 34);
            context.lineWidth = 1;
            context.strokeStyle = '#00FF00';
            context.stroke();
        }
    </script>

Essa é a parte que eu chamo o Canvas em HTML:

<img id="foto<?= $key ?>" alt="img" src="http://meusite.com.br/imgs/<?= $l->img_caminho ?>" onload='init(<?= $key ?>);'>

Como que eu faço para que nesse código ele verifica o tamanho da área e conforme o valor aumente ou diminua o tamanho do Canvas?

7
  • Pode usar CSS. Seu c é a variável que recebe o canvas. Faça c.style.width = LARGURA e c.style.height = ALTURA. Você faz a verificação do tamanho da imagem e defini um valor para o canvas dependendo do que você precisa. 30/09/2015 às 14:37
  • Desculpa @DeeSouza nessa parte eu consegui fazer com que ele pegue a largura e divide no meio e desenha o canvas bem certo na foto. Mas o problema é que não tem apenas 3 tamanhos as fotos. Você vai escolher se você quer a área pequena, média ou grande do desenho. Conforme a área que você escolher ele vai gravar em um campo no banco de dados 25,50,100 se ele escolher o 25, 50 a média e 100 a grande. Preciso saber como eu faço para desenhar o canvas através do valor que está no banco de dados, e com isso fazer a verificação: se for 25 desenha o retângulo menor, 50 desenha o médio e 100 o grande.
    – Ketlin
    1/10/2015 às 11:14
  • Você terá que usar ajax para fazer uma consulta no banco de dados. 1/10/2015 às 11:21
  • @DeeSouza como que faço isso? Não entendo quase nada de Canvas
    – Ketlin
    1/10/2015 às 11:26
  • Como está sua tabela na base de dados ? Você tem um ID para a imagem ? Se sim, esse ID é o que você passa como parâmetro na função init() ? 1/10/2015 às 11:29

1 Resposta 1

1

O constrangimento está na função:

function drawRetangle(context, width, height) {
        position_x = parseInt(width) / 2;
        position_y = parseInt(height) / 2;

        position_x = parseInt(position_x) - 20;
        position_y = parseInt(position_y) - 17;

        context.beginPath();
        context.rect(position_x, position_y, 39, 34);
        context.lineWidth = 1;
        context.strokeStyle = '#00FF00';
        context.stroke();
}

Mais propriamente: "context.rect(position_x, position_y, 39, 34);" Nesta etapa é que estás a dar valores fixos.

Proponho que modifiques o javascript para.:

    function init(i) {
        var img = document.getElementById("foto" + i);
        var cs = getComputedStyle(img);
        var width = parseInt(cs.getPropertyValue('width'));
        var height = parseInt(cs.getPropertyValue('height'));
        $('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
        drawImg(img, cs, width, height, i);
    }
    function drawImg(img, cs, width, height, i) {
        var myCanvas = 'myCanvas' + i;
        var canvas = document.getElementById(myCanvas);
        var c = document.getElementById(myCanvas);
        var ctx = c.getContext("2d");
        var context = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        drawRetangle(context, width, height);
    }
    function drawRetangle(context, width, height) {
        /*
        não é necessário
        position_x = parseInt(width) / 2;
        position_y = parseInt(height) / 2;

        position_x = parseInt(position_x) - 20;
        position_y = parseInt(position_y) - 17;
        */
        context.beginPath();
        /*
        é aqui que estás a colocar o tamanho fixo
        context.rect(position_x, position_y, 39, 34);
        */
        context.rect(0, 0, width, height);
        context.lineWidth = 1;
        context.strokeStyle = '#00FF00';
        context.stroke();
    }

O exemplo está .: http://jsfiddle.net/q6jGr/147/ Para verificares a funcionar basta modificares o width da imagem.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .