0
hello, good morning. I have a fixed image on the canvas and some buttons to draw or delete what was drawn, but I have a problem: when I use the erase button it erases everything (including the image) and I would like to delete only what was drawn. That’s possible?
I’ll leave the code below (I don’t know how to make the buttons appear for you, but if it is possible to at least give me a light of what to do based on what was ordered I thank you)
$(function() {
var c = document.getElementById("desenho");
var ctx = c.getContext("2d");
var img=new Image();
img.crossOrigin = "Anonymous";
img.src="https://app.tisaude.com/c/fichas/1873_fisioterapia.png ";
img.onload=function()
{
ctx.drawImage(img,0,0,730,350);
}
$('#desenho').sketch();
$( "#enviaprontuario" ).click(function() {
var c = document.getElementById("desenho");
var dataURL = c.toDataURL();
$( "#{$q23_id}" ).val(dataURL);
$("#sProntuario").submit()
});
});
var __slice = Array.prototype.slice;
(function($) {
var Sketch;
$.fn.sketch = function() {
var args, key, sketch;
key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
if (this.length > 1) {
$.error('Sketch.js can only be called on one element at a time.');
}
sketch = this.data('sketch');
if (typeof key === 'string' && sketch) {
if (sketch[key]) {
if (typeof sketch[key] === 'function') {
return sketch[key].apply(sketch, args);
} else if (args.length === 0) {
return sketch[key];
} else if (args.length === 1) {
return sketch[key] = args[0];
}
} else {
return $.error('Sketch.js did not recognize the given command.');
}
} else if (sketch) {
return sketch;
} else {
this.data('sketch', new Sketch(this.get(0), key));
return this;
}
};
Sketch = (function() {
function Sketch(el, opts) {
this.el = el;
this.canvas = $(el);
this.context = el.getContext('2d');
this.options = $.extend({
toolLinks: true,
defaultTool: 'marker',
defaultColor: '#000000',
defaultSize: 5
}, opts);
this.painting = false;
this.color = this.options.defaultColor;
this.size = this.options.defaultSize;
this.tool = this.options.defaultTool;
this.actions = [];
this.action = [];
this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
if (this.options.toolLinks) {
$('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
var $canvas, $this, key, sketch, _i, _len, _ref;
$this = $(this);
$canvas = $($this.attr('href'));
sketch = $canvas.data('sketch');
_ref = ['color', 'size', 'tool'];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
key = _ref[_i];
if ($this.attr("data-" + key)) {
sketch.set(key, $(this).attr("data-" + key));
}
}
if ($(this).attr('data-download')) {
sketch.download($(this).attr('data-download'));
}
return false;
});
}
}
Sketch.prototype.download = function(format) {
var mime;
format || (format = "png");
if (format === "jpg") {
format = "jpeg";
}
mime = "image/" + format;
return window.open(this.el.toDataURL(mime));
};
Sketch.prototype.set = function(key, value) {
this[key] = value;
return this.canvas.trigger("sketch.change" + key, value);
};
Sketch.prototype.startPainting = function() {
this.painting = true;
return this.action = {
tool: this.tool,
color: this.color,
size: parseFloat(this.size),
events: []
};
};
Sketch.prototype.stopPainting = function() {
if (this.action) {
this.actions.push(this.action);
}
this.painting = false;
this.action = null;
return this.redraw();
};
Sketch.prototype.onEvent = function(e) {
if (e.originalEvent && e.originalEvent.targetTouches) {
if (e.originalEvent.targetTouches[0] !== undefined && e.originalEvent.targetTouches[0].pageX!==undefined){
e.pageX = e.originalEvent.targetTouches[0].pageX;
}
if (e.originalEvent.targetTouches[0] !== undefined &&e.originalEvent.targetTouches[0].pageY){
e.pageY = e.originalEvent.targetTouches[0].pageY;
}
}
$.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
e.preventDefault();
return false;
};
Sketch.prototype.redraw = function() {
var sketch;
//this.el.width = this.canvas.width();
this.context = this.el.getContext('2d');
sketch = this;
$.each(this.actions, function() {
if (this.tool) {
return $.sketch.tools[this.tool].draw.call(sketch, this);
}
});
if (this.painting && this.action) {
return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
}
};
return Sketch;
})();
$.sketch = {
tools: {}
};
$.sketch.tools.marker = {
onEvent: function(e) {
switch (e.type) {
case 'mousedown':
case 'touchstart':
this.startPainting();
break;
case 'mouseup':
case 'mouseout':
case 'mouseleave':
case 'touchend':
case 'touchcancel':
this.stopPainting();
}
if (this.painting) {
this.action.events.push({
x: e.pageX - this.canvas.offset().left,
y: e.pageY - this.canvas.offset().top,
event: e.type
});
return this.redraw();
}
},
draw: function(action) {
var event, previous, _i, _len, _ref;
this.context.lineJoin = "round";
this.context.lineCap = "round";
this.context.beginPath();
this.context.moveTo(action.events[0].x, action.events[0].y);
_ref = action.events;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
event = _ref[_i];
this.context.lineTo(event.x, event.y);
previous = event;
}
this.context.strokeStyle = action.color;
this.context.lineWidth = action.size;
return this.context.stroke();
}
};
//aqui é onde apaga o que foi desenhado
return $.sketch.tools.eraser = {
onEvent: function(e) {
return $.sketch.tools.marker.onEvent.call(this, e);
},
draw: function(action) {
var oldcomposite;
oldcomposite = this.context.globalCompositeOperation;
this.context.globalCompositeOperation = "copy";
action.color = "rgba(0,0,0,0)";
$.sketch.tools.marker.draw.call(this, action);
return this.context.globalCompositeOperation = oldcomposite;
}
};
})(jQuery);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="col-xs-12" id="divdesenho"><br>
<br>
<div class="tools">
<a href='#desenho' data-color='#000' class="btn" style="background-color: #000"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#CC3300' class="btn" style="background-color: #CC3300"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#2C7227' class="btn" style="background-color: #2C7227"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#6633FF' class="btn" style="background-color: #6633FF"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-color='#9900CC' class="btn" style="background-color: #9900CC"><i class="fa fa-dashboard" style="color: #fff;"></i></a>
<a href='#desenho' data-tool="marker" class="btn" style="background-color: #CCCCCC"><i class="icon-pencil-3" ></i></a>
<a href='#desenho' data-tool="eraser" class="btn" style="background-color: #CCCCCC"><i class="fa fa-eraser" ></i></a>
</div>
<br />
<canvas crossOrigin="anonymous" id="desenho" width="730" height="350" style="border: 1px solid #CCCCCC;"></canvas>
<input name="{$q23_name}" id="{$q23_id}" type="hidden">
</div>