Comments (18)
I'm not sure if this is still an open question, but I changed the script as follows:
I added this to this.options.tool.links:
if ($(this).attr('data-clear')) {
sketch.clear();
}
And this function just below the Sketch.prototype.download function:
Sketch.prototype.clear = function() {
this.actions = [];
return this.redraw();
};
I can call a reset as follows:
<a href='#simple_sketch' data-clear='true'>Clear</a>
Maybe the original author wants to integrate this into a new release?
from sketch.js.
If anyone is still searching for a working code to clear the sketch-canvas by click on any html-element with the ID "myClearButton" :
$("#myClearButton").click(function(){
var canvas = document.getElementById('sketchCanvas');
canvas.getContext('2d').clearRect(0,0,1920,2000);
$('#sketchCanvas').sketch('actions',[]);
});
from sketch.js.
Add this instead, and you have a fix for iOS :D
Sketch.prototype.clear = function() {
this.actions = null;
this.actions = [];
this.painting = false;
return this.redraw();
};
from sketch.js.
I think I got it!
canvas.getContext('2d').clearRect(0,0,width,height);
canvas.sketch('actions',[]);
It looks like the actions were being replayed back onto the screen again during a redraw. So clearing those out meant there was nothing to replay. :)
from sketch.js.
@Furstenwald simply amazing! It works like a charm (iPad too).
Thanks!
Isaac
from sketch.js.
Kudos from here as well @Furstenwald it works flawlessly.
from sketch.js.
@Furstenwald It works fine in PC, android mobile but in iOS, it don't clear all drawing. it clears past drawing only. Anyway, thanks for your help!
from sketch.js.
Hi,
any idea why this great feature is still not merged ?
from sketch.js.
I can also confirm that on iOS the sketch is not cleared - last string drawn will get redrawn. This is an iOS only issue and i think its to do with how we clear the "actions" array - i will investigate further and post if i find a solution.
from sketch.js.
@dkzeb: The sketch is not cleared on touch devices. Try sketch("stopPainting") at first to cancel the last touchstart event.
from sketch.js.
@Humantools - no i found out :) - what i did was a little hack to stop the touch from being registered - cant remember the exact code but basically i added another if statement to catch if we ended touch and the stopped the drawing from there. It works very well now :)
from sketch.js.
@Humantools and thx btw - totally forgot to come back here and write what i did :)
from sketch.js.
it works fine.
skts.sketch().action = null;
skts.sketch().actions = [];
canvO.clearRect(0, 0, canvs.width, canvs.height);
from sketch.js.
@JensWolff - Thanks, I tried yours, which worked across web and Android browser, but the iOS browser didn't function correctly, it retained the very last action, requiring the extra line from @wjswjs2 - to null the 'action' variable as well. Thanks to you both for the assistance!
from sketch.js.
I solved clearing the canvas with the following. Solution takes into account that the background of the canvas might be an image.
Added a clear button in the HTML:
<a href="#colors_sketch" id="clearButton" style="float: right;" data-image="<?= '/file-path' ?>">Eraser</a>
Added inline script as per the example on http://intridea.github.io/sketch.js/ before the $('#colors_sketch').sketch();
<script type="text/javascript">
//Script of $.each([colors], func() etc
//Script of $.each([sizes], func() etc
<?php if ($image) : ?>
var canvas = document.getElementById('colors_sketch'),
context = canvas.getContext('2d'),
base_image = new Image();
base_image.src = "<?= '/file-path' ?>";
base_image.onload = function () {
context.drawImage(
base_image,
0,
0,
canvas.offsetWidth,
canvas.offsetHeight
);
};
<?php endif ?>
$('#colors_sketch').sketch();
</script>
I added this to the if (this.options.toolLinks)
check on line 49, just before the return false
.
if ($(this).is('#clearButton')) {
sketch.clearCanvas($(this).data('image'));
}
Then extended the Sketch object with the following function.
Sketch.prototype.clearCanvas = function(image) {
var canvas = document.getElementById(this.canvas.attr('id')),
context = canvas.getContext('2d');
context.clearRect(
0,
0,
canvas.offsetWidth,
canvas.offsetHeight
);
if (image) {
base_image = new Image();
base_image.src = image;
base_image.onload = function () {
context.drawImage(
base_image,
0,
0,
canvas.offsetWidth,
canvas.offsetHeight
);
};
}
this.actions = [];
return this.redraw();
};
from sketch.js.
@NukeFace I have used your code above but when I start drawing on top of the background image it disappears. Any advice?
from sketch.js.
@sferoze Has been a while since I've used the code above. However, looking at it again, it does not look like my snippet triggers anything automatically. The clearCanvas()
prototype function must be called/triggered and the JS in within the PHP tags adds some code to add the image to the background.
If you have the problem that the image disappears when you start drawing, you might have a trigger on your code somewhere that triggers either the redraw()
or sketch()
functions.
from sketch.js.
Check out the code below. It is the redraw function. It is called when you are drawing with the market on the canvas. Notice the line that is commented out this.el.width = this.canvas.width();
. When that line is commented out the background image stays, but then the drawing line look a little fatter and has jagged edges. It's just not as smooth. So it seems like I need that line of code. But if I leave it in, then the background image disappears. Any idea what's going on?
Sketch.prototype.redraw = function() {
var sketch;
// When line below commented out the background image stays... but the drawing line becomes jagged and not smooth like before. Why?
// 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);
}
};
from sketch.js.
Related Issues (20)
- Alpha (opacity) is applying for previous strokes HOT 3
- Cannot draw multiple times in iPad safari HOT 3
- Zoom in/out
- support for touchscreens HOT 1
- Reset / clean mantainig background
- Stop of painting
- return two different object ... which is wrong...
- How could i edit previous drwant skecth?
- Get Canvas Image HOT 1
- Send Image in HTML form HOT 1
- Responsiveness HOT 3
- Opacity of data-color (stroke) HOT 1
- Drawing dots not working HOT 1
- Mobile Error on method onEvent (with correction) HOT 1
- Last action on canvas can't be detected in mobile chrome browser. HOT 1
- Sketch cannot be used on Android 6.0
- Add git tag
- Time to move? New repo. HOT 1
- how can i get the height and width of the skectched area?
- Is this repo death?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sketch.js.