Closed dukewan closed 4 years ago
I’ll look into this but you should use the requestAnimationFrame
Thanks for looking! I just tried requestAnimationFrame
with no luck:
onCanvasTouch2 (args) {
requestAnimationFrame(() => {
this.ctx.beginPath()
this.ctx.moveTo(100 * Math.random(), 100 * Math.random())
this.ctx.lineTo(400 * Math.random(), 400 * Math.random())
this.ctx.strokeStyle = 'blue'
this.ctx.strokeWidth = 40
this.ctx.stroke()
this.ctx.closePath()
})
}
Btw, the background color of canvas differs between emulator and real device. Device reflect the transparent that I set while emulator has yellow background.
I noticed that will try fixing for next release also what device are you testing on (mine is usually a 11 Pro Max)
oh one thing you can do is
canvasReady ({ object }) {
const canvas = object
canvas.nativeView.handleInvalidationManually = true;
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = 'red'
ctx.arc(150, 75, 50, 0, 2 * Math.PI)
ctx.fill()
canvas.flush();
ctx.closePath()
this.ctx = ctx
},
onCanvasTouch2 () {
this.ctx.beginPath()
this.ctx.moveTo(100 * Math.random(), 100 * Math.random())
this.ctx.lineTo(400 * Math.random(), 400 * Math.random())
this.ctx.strokeStyle = 'blue'
this.ctx.strokeWidth = 40
this.ctx.stroke()
this.ctx.canvas.flush();
this.ctx.closePath()
},
it my little way of allowing the flush (draw to screen) manually instead of the CADisplayLink
The new attempt improves a bit, we don't have the white background while flickering now. But the flickering still exists.
Looking at the gif that I attached, it seems there are two different canvas layers, the toggling between these two canvas make it look flickering.
I use iPhone Xs for testing.
Can you try this tap the screen or touch and drag LMK how it looks (dragging for long you may notice a slow down the final updates to start 1.x should improve that)
It seems to have the same issue.
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Please, tell us how to recreate the issue in as much detail as possible.
Describe the steps to reproduce it.
nativescript-canvas-plugin
ready
method to update canvas, or handle@touch
to update canvasIs there any code involved?
Template:
Js: