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