I’ve now implemented the basic building blocks for working with imported images and graphics in the form of a new Image tool to add new image layers and draw a box for them, an import image menu item, a new Image layer node for generating image elements and image data parameters that allow you to import images from file and store them in the document.
In more simple terms this now allows you to add images from files or the system clipboard as layers in Paragraphic, and the Image Elements this generates can then be used just like any other elements, being repeated, transformed etc by other layer nodes. The Image Elements currently support importing bitmap images in png and jpeg format and svg vector graphics.
Currently SVG images are rendered as is, just embedding the original SVG svg but the plan is to eventually also offer a way of converting the svg elements into paragraphic path elements when possible, to allow for more interesting modifications of the elements than just transforming them.
Image rendering and performance
I’ve also worked a little with rendering performance related to images. I’ve tried to avoid early optimization and concentrated on functionality, but in the case of image rendering I made an exception. Since I’m trying to keep the output SVG-compliant I’m basically generating SVG code for all layer output that is then rendered using and SVG renderer. This is not very efficient, but good enough for vector graphics and means I don’t need to build my own svg renderer.
However, for large bitmap images this method is very slow since the pixel data has to be translated back/forth to a base64 text string in the SVG code. So I’ve implemented an alternative rendering method where image elements in layers are instead rendered much faster using the GPU. This massively increased performance when working with images, but it does however have the drawback that if you have layers with images mixed with other types of elements, they will not always be drawn in the correct order in the preview since they are drawn in a separate pass. I’m not sure how often this will be an issue, but it is something I’ll have to revisit and fix later.
Additional improvements
UI
- New segmented button controls for parameters like alignment as an alternative to drop-down selection menu popup buttons.
- New “Apply to” parameter controls for change nodes with a different background to differentiate these selection controls from the other node controls.
- Improvements to menu item validation and shortcut handling.
Nodes
- New nodes for applying relative adjustments to stroke or fill (like lighter/darker color)
Import/Export
- New File menu items for importing image files.
- Initial pasteboard access support for getting image and svg content from the system clipboard.