Implementing Typography for Skia (#376)

* Add text variables to style data class for both vispy and skia as they are affected by push and pop operations.

* Remove font size reset

* Implement the render_text function in renderer

* - Implemented preload
- Implemented text_font and text

* - Refactor text in skia renderer.
- Update the text() to use current text_size if not specified
- Remove unused variables

* Reset stroke_set after each draw call

* Added test for text APIs

* - Added comment for typography variables in constants.py
- Update typography test

* Add a TODO in typography test

* Update typography test to use path relative to sanity_testing.py

* Fix text_font for vispy to set size as well

* Additions
- Added text_style for skia
- Skia can also make fonts from FontFamily, addded support for that in p5py

* Fix pylint

Author: tushar5526

p5/core/attribs.py

@@ -85,6 +85,7 @@ def stroke(*color_args, **color_kwargs):
     """
     stroke_color = Color(*color_args, **color_kwargs)
     p5.renderer.style.stroke_enabled = True
+    p5.renderer.style.stroke_set = True
     p5.renderer.style.stroke_color = stroke_color.normalized
 
 

p5/core/constants.py

@@ -40,10 +40,16 @@
 CORNER = "CORNER"
 CORNERS = "CORNERS"
 
+# Typography Setting Options
 LEFT = "LEFT"
 RIGHT = "RIGHT"
 TOP = "TOP"
 BOTTOM = "BOTTOM"
+BASELINE = "BASELINE"
+NORMAL = "NORMAL"
+ITALIC = "ITALIC"
+BOLD = "BOLD"
+BOLDITALIC = "BOLDITALIC"
 
 # Colors
 colour_codes = {

p5/core/font.py

@@ -15,18 +15,6 @@
 # You should have received a copy of the GNU General Public License
 # along with this program. If not, see <http://www.gnu.org/licenses/>.
 #
-import textwrap
-
-from PIL import Image
-from PIL import ImageDraw
-from PIL import ImageFont
-from PIL import ImageFilter
-from PIL import ImageChops
-
-from .image import image
-from .image import PImage
-from .structure import push_style
-
 from . import p5
 
 __all__ = [
@@ -40,6 +28,7 @@
     "text_width",
     "text_ascent",
     "text_descent",
+    "text_style",
 ]
 
 
@@ -102,14 +91,15 @@ def text(*args, wrap_at=None):
     return p5.renderer.text(text_string, position, wrap_at)
 
 
-def text_font(font, size=10):
+def text_font(font, size=None):
     """Set current text font.
 
-    :param font:
+    :param font: PIL.ImageFont.ImageFont for Vispy, Object|String: a font loaded via loadFont(), or a String
+    representing a web safe font (a font that is generally available across all systems)
     :type font: PIL.ImageFont.ImageFont
 
     """
-    p5.renderer.font_family = font
+    p5.renderer.text_font(font, size)
 
 
 def text_align(align_x, align_y=None):
@@ -122,9 +112,9 @@ def text_align(align_x, align_y=None):
     :type align_y: string
 
     """
-    p5.renderer.text_align_x = align_x
+    p5.renderer.style.text_align_x = align_x
     if align_y:
-        p5.renderer.text_align_y = align_y
+        p5.renderer.style.text_align_y = align_y
 
 
 def text_leading(leading):
@@ -135,7 +125,7 @@ def text_leading(leading):
 
     """
 
-    p5.renderer.text_leading = leading
+    p5.renderer.style.text_leading = leading
 
 
 def text_size(size):
@@ -182,3 +172,17 @@ def text_descent():
 
     """
     return p5.renderer.text_descent()
+
+
+def text_style(s):
+    """
+    Sets/Gets the style of the text for system fonts to NORMAL, ITALIC, BOLD or BOLDITALIC
+    For non-system fonts (opentype, truetype, etc.) please load styled fonts instead.
+
+    :param s: Style for the font
+    :type s: NORMAL | ITALIC | BOLD | BOLDITALIC
+
+    :returns: Current text style
+    :rtype: NORMAL | ITALIC | BOLD | BOLDITALIC
+    """
+    return p5.renderer.text_style(s)

p5/sketch/Skia2DRenderer/renderer2d.py

@@ -29,6 +29,16 @@ class Style2D:
     stroke_cap = skia.Paint.kRound_Cap
     stroke_join = skia.Paint.kMiter_Join
 
+    # Flag that holds whether stroke() is called user
+    stroke_set = False
+    text_font = skia.Font(skia.Typeface())
+    text_leading = 0
+    text_size = 15
+    text_align = (constants.LEFT, constants.TOP)
+    text_wrap = None
+    text_baseline = constants.BASELINE
+    text_style = constants.NORMAL
+
     def set_stroke_cap(self, c):
         if c == constants.ROUND:
             self.stroke_cap = skia.Paint.kRound_Cap
@@ -53,9 +63,6 @@ def __init__(self):
         self.style = Style2D()
         self.style_stack = []
         self.path = None
-        self.font = skia.Font()
-        self.typeface = skia.Typeface.MakeDefault()
-        self.font.setTypeface(self.typeface)
         self.curve_tightness = 0
 
     # Transforms functions
@@ -131,36 +138,63 @@ def render_text(self, text, x, y):
         # full path works relative does not
         # assert (typeface is not None), "should not be NULL"
         # handle alignment manually
+        if self.style.stroke_enabled and self.style.stroke_set:
+            self.paint.setStyle(skia.Paint.kStroke_Style)
+            self.paint.setColor(skia.Color4f(*self.style.stroke_color))
+            self.paint.setStrokeWidth(self.style.stroke_weight)
+            self.canvas.drawSimpleText(text, x, y, self.style.text_font, self.paint)
+
         if self.style.fill_enabled:
             self.paint.setStyle(skia.Paint.kFill_Style)
-            self.paint.setColor(self.style.fill_color)
-            self.canvas.drawPath(self.path, self.paint)
+            self.paint.setColor(skia.Color4f(*self.style.fill_color))
+            self.canvas.drawSimpleText(text, x, y, self.style.text_font, self.paint)
 
-        if self.style.stroke_enabled:
-            self.paint.setStyle(skia.Paint.kStroke_Style)
-            self.paint.setColor(self.style.stroke_color)
-            self.paint.setStrokeWidth(self.style.stroke_weight)
-            self.canvas.drawPath(self.path, self.paint)
-        self.canvas.drawSimpleText(text, x, y, self.font, self.paint)
+    def text(self, text, position, max_width=None, max_height=None):
+        self.render_text(text, *position)
 
     def load_font(self, path):
         """
         path: string
         Absolute path of the font file
         returns: skia.Typeface
         """
-        typeface = skia.Typeface.MakeFromFile(path)
+        typeface = skia.Typeface().MakeFromFile(path=path)
         return typeface
 
-    def set_font(self, font):
+    def text_font(self, font, size=None):
         """
         Sets the current font to be used for rendering text
         """
-        self.typeface = font
-        self.font.setTypeface(self.typeface)
+        if size:
+            self.style.text_size = size
+        if isinstance(font, str):
+            self.style.text_font.setTypeface(skia.Typeface.MakeFromName(font))
+        else:
+            self.style.text_font.setTypeface(font)
+
+    def text_size(self, size):
+        self.style.text_font.setSize(size)
+
+    def text_style(self, s):
+        skia_font_style = None
+        if s == constants.BOLD:
+            skia_font_style = skia.FontStyle.Bold()
+        elif s == constants.BOLDITALIC:
+            skia_font_style = skia.FontStyle.BoldItalic()
+        elif s == constants.ITALIC:
+            skia_font_style = skia.FontStyle.BoldItalic()
+        elif s == constants.NORMAL:
+            skia_font_style = skia.FontStyle.Normal()
+        else:
+            return self.style.text_style
+
+        self.style.text_style = s
+        # skia.Font.
+        family_name = self.style.text_font.getTypeface().getFamilyName()
+        typeface = skia.Typeface.MakeFromName(family_name, skia_font_style)
+        self.style.text_font.setTypeface(typeface)
 
-    def set_font_size(self, size):
-        self.font.setSize(size)
+        return self.style.text_style
 
     def render_image(self, img, *args):
         self.canvas.drawImage(img, *args)
@@ -213,7 +247,8 @@ def render(self, fill=True, stroke=True, rewind=True):
 
     def reset(self):
         self.reset_matrix()
-        self.font.setSize(15)
+        # NOTE: We have to handle PGraphics stroke_set as well separately
+        self.style.stroke_set = False
 
     def line(self, path):
         x1, y1, x2, y2 = path[0].x, path[0].y, path[1].x, path[1].y

p5/sketch/Vispy2DRenderer/openglrenderer.py

@@ -238,6 +238,12 @@ class Style2D:
     stroke_cap = ROUND
     stroke_join = MITER
 
+    # typography variables
+    font_family = ImageFont.load_default()
+    text_align_x = LEFT
+    text_align_y = TOP
+    text_leading = 0
+
     def set_stroke_cap(self, c):
         self.stroke_cap = c
 
@@ -287,15 +293,6 @@ def __init__(self, src_fbuffer, src_default):
         self.matrix_stack = []
 
         self.curve_tightness = 0
-        
-        # typography variables
-        self.font_family = ImageFont.load_default()
-        self.text_align_x = LEFT
-        self.text_align_y = TOP
-        self.text_leading = 0
-
-
-
 
     def render_default(self, draw_type, draw_queue):
         # 1. Get the maximum number of vertices persent in the shapes

p5/sketch/Vispy2DRenderer/renderer2d.py

@@ -408,14 +408,14 @@ def text(self, text_string, position, wrap_at):
         multiline = False
         if not (wrap_at is None):
             text_string = textwrap.fill(text_string, wrap_at)
-            size = self.font_family.getsize_multiline(text_string)
+            size = self.style.font_family.getsize_multiline(text_string)
             multiline = True
         elif "\n" in text_string:
             multiline = True
-            size = list(self.font_family.getsize_multiline(text_string))
-            size[1] += self.text_leading * text_string.count("\n")
+            size = list(self.style.font_family.getsize_multiline(text_string))
+            size[1] += self.style.text_leading * text_string.count("\n")
         else:
-            size = self.font_family.getsize(text_string)
+            size = self.style.font_family.getsize(text_string)
 
         is_stroke_valid = False  # True when stroke_weight != 0
         is_min_filter = False  # True when stroke_weight <0
@@ -445,11 +445,11 @@ def text(self, text_string, position, wrap_at):
             canvas_draw.multiline_text(
                 text_xy,
                 text_string,
-                font=self.font_family,
-                spacing=self.text_leading,
+                font=self.style.style.font_family,
+                spacing=self.style.text_leading,
             )
         else:
-            canvas_draw.text(text_xy, text_string, font=self.font_family)
+            canvas_draw.text(text_xy, text_string, font=self.style.font_family)
 
         text_image = PImage(*new_size)
         text_image._img = canvas
@@ -465,18 +465,18 @@ def text(self, text_string, position, wrap_at):
 
         width, height = new_size
         position = list(position)
-        if self.text_align_x == LEFT:
+        if self.style.text_align_x == LEFT:
             position[0] += 0
-        elif self.text_align_x == RIGHT:
+        elif self.style.text_align_x == RIGHT:
             position[0] -= width
-        elif self.text_align_x == CENTER:
+        elif self.style.text_align_x == CENTER:
             position[0] -= width / 2
 
-        if self.text_align_y == TOP:
+        if self.style.text_align_y == TOP:
             position[1] += 0
-        elif self.text_align_y == BOTTOM:
+        elif self.style.text_align_y == BOTTOM:
             position[1] -= height
-        elif self.text_align_y == CENTER:
+        elif self.style.text_align_y == CENTER:
             position[1] -= height / 2
 
         with push_style():
@@ -491,22 +491,32 @@ def text(self, text_string, position, wrap_at):
 
         return text_string
 
+    def text_font(self, font, size):
+        self.style.font_family = font
+        if size:
+            self.text_size(size)
+
     def text_size(self, size):
-        if hasattr(self.font_family, "path"):
-            if self.font_family.path.endswith("ttf") or self.font_family.path.endswith(
-                "otf"
-            ):
-                self.font_family = ImageFont.truetype(self.font_family.path, size)
+        if hasattr(self.style.font_family, "path"):
+            if self.style.font_family.path.endswith(
+                "ttf"
+            ) or self.style.font_family.path.endswith("otf"):
+                self.style.font_family = ImageFont.truetype(
+                    self.style.font_family.path, size
+                )
         else:
             raise ValueError("text_size is not supported for Bitmap Fonts")
 
     def text_width(self, text):
-        return self.font_family.getsize(text)[0]
+        return self.style.font_family.getsize(text)[0]
 
     def text_ascent(self):
-        ascent, descent = self.font_family.getmetrics()
+        ascent, descent = self.style.font_family.getmetrics()
         return ascent
 
     def text_descent(self):
-        ascent, descent = self.font_family.getmetrics()
+        ascent, descent = self.style.font_family.getmetrics()
         return descent
+
+    def text_style(self):
+        raise NotImplementedError("Not Implemented error in Vispy")