How to change the pieceSize and redraw? #59
Replies: 6 comments 1 reply
-
|
What have you tried? Could you share some code, please? Regards |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Something like this <script src="https://flbulgarelli.github.io/headbreaker/js/headbreaker.js"></script>
<body>
<button id="increase">
increase
</button>
<button id="decrease">
decrease
</button>
<div id="puzzle"></div>
<script>
const autogen = new headbreaker.Canvas('puzzle', {
width: 800,
height: 650,
pieceSize: 100,
proximity: 20,
borderFill: 10,
strokeWidth: 2,
lineSoftness: 0.18,
});
autogen.autogenerate({
horizontalPiecesCount: 2,
verticalPiecesCount: 2,
metadata: [{
color: '#B83361'
},
{
color: '#B87D32'
},
{
color: '#A4C234'
},
{
color: '#37AB8C'
}
]
});
autogen.draw();
document.getElementById("increase").addEventListener('click', function() {
console.log("increase")
autogen.pieceSize = autogen.pieceSize + 10;
autogen.redraw();
})
document.getElementById("decrease").addEventListener('click', function() {
console.log("decrease")
autogen.pieceSize = autogen.pieceSize - 10;
autogen.redraw();
})
</script>
</body> |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Redraw does not seem to update the canvas. I console logged the canvas.puzzle afterwards and size or number of pieces is updated but the canvas does not change it. It does change the rendering of the image though so something is happening. Any idea what could be wrong? |
Beta Was this translation helpful? Give feedback.
-
|
Hi! It looks like there are two different issues here:
Hope it helps! |
Beta Was this translation helpful? Give feedback.
-
|
PS: Have you tried scaling the canvas - using the |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I tried this scale solution and it works. The only issue I have is that the shuffle area becomes smaller and if I shuffle the area where the piece are put has also been scaled down.
Is there a way to allow the shuffle method to use the entire canvas again? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi,
I would like to add 2 buttons to increase and decrease the pieceSize and redraw but it is not working.
Beta Was this translation helpful? Give feedback.
All reactions