1

Eu achei um codigo a um tempo e modifiquei ele no javascript puro. Funcionou certinho. Mas agora eu tenho que fazer algo parecido com o que ele faz no vue. O problema é que sou meio novo no vue e tenho pouco tempo para terminar.

OBS: basicamente a funcionalidade do código é desenhar livremente no canvas como se fosse o paint. Dentro do objeto vue tem algumas outras coisas referentes ao cadastro, pois essa funcionalidade faz parte de um formulario de cadastro, mas é facil identificar o que se trata do canvas. Imagino que seja algo que fiz contra as regras da biblioteca.

OBS 2: O unico problema realmente é o fato de não estar aparecendo linha nenhuma quando se desenha, mas o js não retorna nenhum tipo de erro.

HTML(esse codigo HTML está dentro do elemento de cadastro)

<div v-show="ativo == true" >
                    <div id="paint">
                        <span id="converter">Confirmar</span>
                         <span id="limpar">Limpar</span>
                         <span v-on:click="ativo = false" id="cancelar">Cancelar</span>
                         <canvas id="canvas" v-on:mousedown="evento1" v-on:mouseup="evento2"></canvas>
                    </div>
                </div>

Enfim, aqui está o codigo em js puro que funciona:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue('width'));
canvas.height = parseInt(paint_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};

canvas.addEventListener('mousemove', function(e) {
  mouse.x = e.pageX - this.offsetLeft;
  mouse.y = e.pageY - this.offsetTop;
}, false);

ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#6f79ed';

canvas.addEventListener('mousedown', function(e) {
    ctx.beginPath();
    ctx.moveTo(mouse.x, mouse.y);

    canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var onPaint = function() {
    ctx.lineTo(mouse.x, mouse.y);
    ctx.stroke();
};

E aqui está o objeto do vue com o código dentro que eu tentei, aparentemente de modo falho, converter pra vue:

var cadastro = new Vue({
    el:'#cadastro',

    data:{
        pagina:0,
        titulo:["Dados Pessoais", "Endereço", "Curso"],
        nome: '',
        sobrenome: '',
        email:'',
        datanasc:'',
        rg:'',
        cpf:'',
        cep:'',
        logradouro:'',
        numero:'',
        complemento:'',
        bairro:'',
        cidade:'',
        estado:'',
        pais:'',
        opcao1:'',
        unidade1:'',
        opcao2:'',
        unidade2:'',
        mouse: {x:0, y:0},
        canvas: document.getElementById('canvas'),
        ctx: document.getElementById('canvas').getContext('2d'),
        painting: document.getElementById('paint'),
        paint_style: getComputedStyle(document.getElementById('paint')),
        ativo:false
    },

    computed: {
        tituloAtual: function() {
            return this.titulo[this.pagina];
        },
    },

    methods:{
        passarPagina: function(e){
            e.preventDefault();
            this.pagina++;
        },

        voltarPagina: function(e){
            e.preventDefault();
            this.pagina--;
        },

        evento0: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));


             cadastro.mouse.x = e.pageX - this.offsetLeft;
             cadastro.mouse.y = e.pageY - this.offsetTop;
        },

        evento1: function(e){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));



            cadastro.ctx.beginPath();
            cadastro.ctx.moveTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.canvas.addEventListener('mousemove', cadastro.onPaint, false);
        },

        evento2: function(e){
            var canvas = document.getElementById('canvas');
            canvas.removeEventListener('mousemove', cadastro.onPaint, false);
        },

        onPaint : function(){
            cadastro.ctx.lineWidth = 3;
            cadastro.ctx.lineJoin = 'round';
            cadastro.ctx.lineCap = 'round';
            cadastro.ctx.strokeStyle = '#6f79ed';
            cadastro.canvas.width = parseInt(cadastro.paint_style.getPropertyValue('width'));
            cadastro.canvas.height = parseInt(cadastro.paint_style.getPropertyValue('height'));
            cadastro.ctx.lineTo(cadastro.mouse.x, cadastro.mouse.y);
            cadastro.ctx.stroke();
        },

        buscaCep: function(event){
            axios.get('http://api.postmon.com.br/v1/cep/'+this.cep )
              .then(function(response){
                cadastro.complemento = response.data.complemento;
                cadastro.bairro = response.data.bairro;
                cadastro.logradouro = response.data.logradouro;
                cadastro.estado = response.data.estado_info.nome;
                cadastro.cidade = response.data.cidade;
              }); 
        }
    }
});
4
  • Por você coloque o codigo no JSFiddle ou JsBin e passe o link para que possamos testar, apenas olhando o que passou, fica dificil. Commented 18/07/2017 às 17:23
  • Não vejo o v-on:mousemove no Vue/template.
    – Sergio
    Commented 18/07/2017 às 17:36
  • Vou tentar colocar assim que eu puder Rafael. Commented 18/07/2017 às 17:39
  • mousemove é ativado ou desativado dentro das funções dos outros eventos Commented 18/07/2017 às 17:40

1 Resposta 1

0

Resolvi o problema tirando tudo que se refere a essa ferramenta que estou fazendo com o canvas do objeto do elemento cadastro e criei um componente para trabalhar só com o que se refere ao canvas.

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 .