Test purpose
- Create a phrase entity
- Clone the phrase, to check the various drawing methods available
- Change the state of a subset of phrases sharing the same state object
- Cache the output of each Phrase entity and create Picture entitys from them
- Position the picture phrases on the canvas
- Check drag-and-drop functionality
Known issues when using this approach:
- Calculating the best Picture dimensions to replicate the Phrase may take some experimentation; remember that Phrase entitys include their lineHight attribute when calculating their height value.
- Any bounding box will be incorrectly placed with relation to the captured text; try using a stroke around the Picture entity instead.
- Phrase entitys with dynamic fill or stroke styles (for example animated patterns or gradients) will not benefit from this approach.
- The 'clear' method will not work because the cache image is captured against a transparent background.
Touch test: should work as expected - though flicking a text may lead to it moving beyond the canvas border and out of sight!
Annotated code