Closed I-NOZex closed 5 years ago
By doing this you access the CanvasView
not the canvas
You need to either use @draw="onDraw"
to access the canvas and redraw on every draw call
Or use shapes like this
<CanvasView row="0" :density="density" ref="canvas" width="100%" backgroundColor="#44ff0000">
<Shapes>
<Rectangle shadow="3 3 black" strokeColor="red" :fillColor="shapeColor" strokeWidth="6" :left="shapeLeft" top="10" :width="shapeLeft + '%'" height="50%" />
<Arc color="yellow" :antiAlias="antiAlias" shadow="0 0 10 red" paintStyle="stroke" strokeCap="round" strokeWidth="10" left="20" top="20" :width="arcWidth" :height="arcWidth" startAngle="0" :sweepAngle="sweepAngle" />
<Text :antiAlias="antiAlias" color="green" top="50" text="test Text" fontSize="50" />
<Line :antiAlias="antiAlias" color="yellow" startX="10" startY="10" stopX="505" stopY="50" strokeCap="round" strokeJoin="round" strokeWidth="8" dash="1 10 0"/>
<Line :antiAlias="antiAlias" color="#1C2738" startX="10%" startY="50%" stopX="90%" stopY="50%" strokeCap="round" strokeJoin="round" strokeWidth="1" dash="1 3 0"/>
</Shapes>
</CanvasView>
The example where i use
const canvas = this.$refs.canvas.nativeView;
is to only force redraw when i change a property in the animation example.
You get it?
Yes, I see now how it's supposed to work. Thank you! 👍
I've saw in one of your code examples that you access this way:
I'm not using typescript, so I can't enforce the type, but this should work:
Unfortunately that doesn't give me access to the canvas functions, like drawing and so on...
Can you help?