System and method for applying effects to design elements

Abstract

Described herein is a computer-implemented method. The method includes detecting an initiation of a curved text effect with respect to a selected text string of a design; determining a radius; processing the selected text string to split the selected text string into one or more text string elements, each text string element being associated with a glyph; computing, for each text string element, an element transform including element rotation data and element position data, the element transform being based on the radius; and rendering each text string element by rendering the glyph associated with the given text string element based on the element transform computed for the given text string element.

Description

Technical Field

[0001] This disclosure relates to systems and methods for applying effects to design elements. Background Technology

[0002] There are various computer-implemented tools available for creating and publishing designs or other visual content. Generally, such tools allow users to create, for example, a page and then add design elements to that page.

[0003] Typically, a given design tool provides a large number of different types of design elements, which can be added to a page either by being created by the user from scratch or by accessing elements from a library (such as a shape library or other graphic library). Furthermore, for any given element, there are usually many attributes and parameters that can be adjusted to change the element's appearance in a certain way.

[0004] Offering a large number of element types, and for each element type, various adjustable parameters, is advantageous in many cases, as it allows users to create complex and intricate designs. However, it can also introduce disadvantages. For example, with a large number of available element types and a multitude of options for manipulating these elements, users may not be aware that it is possible to create specific effects. Even if users know (or suspect) that creating specific effects is possible, they may not be able to create such effects, let alone do so effectively.

[0005] The background information described in this specification is background information known to the inventor. Referring to this information as background information does not imply an admission or representation that this background information is prior art or common knowledge known to those skilled in the art. Summary of the Invention

[0006] This document describes a computer-implemented method comprising: detecting the initiation of a curved text effect for a selected text string of design; determining a radius; processing the selected text string to split it into one or more text string elements, each text string element being associated with a glyph; calculating an element transformation for each text string element, including element rotation data and element position data, the element transformation being based on the radius; and, for a given text string element, rendering each text string element by rendering the glyph associated with the given text string element based on the element transformation calculated for the given text string element.

[0007] This document also describes a computer processing system comprising: a processing unit; a display; and a non-transitory computer-readable storage medium storing instructions executed by the processing unit, such that the processing unit: detects the initiation of a curved text effect for a selected text string of design; determines a radius; processes the selected text string to split it into one or more text string elements, each text string element being associated with a glyph; calculates an element transformation for each text string element, including element rotation data and element position data, the element transformation being based on the radius; and, for a given text string element, renders each text string element on the display by rendering the glyph associated with the given text string element based on the element transformation calculated for the given text string element. Attached Figure Description

[0008] In the attached diagram:

[0009] Figure 1 An example environment is described in which the features of this disclosure can be implemented.

[0010] Figure 2 This is an example computer processing system that can be configured to perform the various features described herein.

[0011] Figure 3 Provides sample designs for creating user interfaces.

[0012] Figure 4 Provides a sample effect control interface.

[0013] Figure 5 An example of curved text is provided.

[0014] Figure 6 Provides a replaceable sample effect control interface.

[0015] Figure 7 This is a flowchart illustrating the operations involved in applying a curved text effect to a selected text string design element.

[0016] Figure 8 , Figure 9 , Figure 10 An example of curved text is provided.

[0017] Figure 11 A flowchart depicting the operations involved in calculating the suggested radius.

[0018] Figure 12 and Figure 13 An example of curved text is provided.

[0019] Figure 14 Provide an example of a text string.

[0020] While the claimed invention may have various modifications and alternatives, specific embodiments are shown by way of example in the accompanying drawings, and are described in detail. However, it should be understood that the drawings and detailed descriptions are not intended to limit the invention to the specific forms disclosed. The intention is to cover all modifications, equivalents, and substitutions that fall within the spirit and scope of the invention as defined by the appended claims. Detailed Implementation

[0021] In the following description, numerous specific details are set forth in order to provide a thorough understanding of the claimed invention. However, it will be apparent, however, that the claimed invention can be practiced without these specific details. In some cases, well-known structures and devices are shown in block diagram form to avoid unnecessary ambiguity.

[0022] As mentioned above, many tools exist for creating and publishing visual content. This disclosure focuses primarily on capturing text strings and rendering them in a curved form.

[0023] First, a brief overview of the text is provided. Next, a networked environment and computer processing system in which the features of this disclosure can be implemented will be described. An example user interface used to create the design is described, followed by the processing involved in applying and adjusting the effects on selected design elements.

[0024] This disclosure relates to processing text strings. In a computing environment, text strings can be stored, communicated, and displayed in various ways. In this disclosure, a text string is one or more character sets. Each character of a text string is defined by character information, which in this disclosure includes character identifiers and text attributes.

[0025] Character identifiers define what a character is; for example, the letter "a", the symbol "&", and the smiley face emoticon "a". ", or any other character. A common way to identify characters is through the Unicode standard or Unicode code space, such as the Unicode Transform Format—an 8-bit (UTF-8) encoding scheme. In this scheme, characters (e.g., letters, numbers, symbols, ideograms, emojis, etc.) are identified by code points. For example, the Unicode code point "U+0041" represents the Latin capital letter A, and the Unicode code point "U+1F600" represents a smiley face emoji / emoticon. The techniques described in this article can be applied to alternative schemes / mechanisms for representing text.

[0026] Text properties provide information about how to display the glyphs corresponding to a specific character. These text properties can include attributes such as font type, font size, font style (italic, bold, etc.), line height, letter spacing, and / or other attributes.

[0027] Generally, character identifiers and associated attributes allow for the calculation of glyph display dimensions, such as glyph width and glyph height. Using such dimensions, the total size of the displayed text string can be calculated, such as the linear text string length (the sum of all glyph widths) and the linear text string height (the maximum glyph height of all characters in the text string).

[0028] For example, “A” is a text string containing the single character “A” (code point U+0041), Arial, and the dot 12. "(See Figure 14 1402 is a text string that includes: the character "A" (code point U+0041), Arial, 12 o'clock; the character "b" (code point U+0062), Arial, 12 o'clock, bold; the character "c" (code point U+0063), Arial, 12 o'clock, underlined; the character "d" (code point U+0064), Arial, 12 o'clock, italicized; the character " " (i.e., space, code point U+0020), Arial, 12 o'clock; the character " (Code point U+1F600), Arial, 12 o'clock.

[0029] As described below, in this disclosure, generating a curved text string involves splitting a topic text string into one or more sets of text string elements (e.g., an array).

[0030] In some embodiments, text string elements correspond to single characters or explicitly defined groups of characters in the text string (i.e., characters explicitly combined by combining characters). In these embodiments, for example, splitting the text string " (1402) can produce the following set of text string elements:

[0031] [A, b, c ,d, , (See 1404)

[0032] In other embodiments, a single text element may include multiple characters (whether or not explicitly connected by combining characters). For example, a text element may be based on hyphens. For example, in this case, the text string is split, such as... Figure 14 The text string shown in 1406 can produce the three elements shown in 1408. This contrasts with splitting the same text string (1406) into individual characters, which would produce the elements shown in 1410.

[0033] In this example, the element is a concatenated hyphen, not a single (or explicitly combined) character. A concatenated hyphen can include multiple individual characters, even if these characters are not explicitly combined by a combining character.

[0034] Turning Figure 1This provides an example of a networked environment 100 in which various operations and techniques described herein can be performed.

[0035] The networked environment 100 includes a server system 102 and a client system 110 interconnected via a communication network 120 (e.g., the Internet). Although a single client system 110 is illustrated and described, the server system 102 typically serves multiple client systems.

[0036] Server system 102 includes various functional components that work together to provide server-side functionality.

[0037] One component of server system 102 is front-end server application 104. Server application 104 is executed by a computer processing system to configure server system 102 to provide server-side functionality to one or more corresponding client applications (e.g., client application 112 described below). Server-side functionality includes operations such as user account management functions, login functions, and content creation functions (e.g., creating, saving, publishing, and sharing content (e.g., designing)).

[0038] To provide server-side functionality, server application 104 includes one or more applications, libraries, APIs, or other software elements. For example, if client application 112 is a web browser, server application 104 will be a web server such as Apache, IIS, nginx, GWS, or an alternative web server. If client application 112 is a specific application, server application 104 will be an application server specifically configured to interact with that client application 112. Server system 102 may provide web server modules and application server modules.

[0039] In this example, server system 102 also includes data storage 106 for storing various data required by server system 102 during its operation. Such data may include, for example, user account data, design template data, design element data, and data about designs that the user has created. While depicting a single data storage 106, server system 102 may include / utilize multiple separate data storages, such as a user data storage (storing user account details), one or more design element library data storages (storing design elements such as graphics that the user can add to the design being created), a template data storage (storing templates that the user can use to create designs), a design data storage (storing data about designs that have been created), and / or other data storages.

[0040] To provide server-side functionality to clients, server system 102 will typically include additional functional components beyond those illustrated and described. As an example, server system 102 will typically include one or more firewalls (and / or other network security components), a load balancer (for managing access to server application 104), and / or other components.

[0041] Server system component 102 has been described as a functional component and can be implemented by hardware, software (data and computer-readable instructions stored in memory and executed by one or more computer processing systems), and / or a combination of hardware and software.

[0042] The exact hardware architecture of server system 102 will vary depending on the implementation. Server system 102 typically includes multiple computer processing systems (e.g., server computers) that communicate directly or through one or more networks (e.g., one or more LANs, WANs, or other networks with security logic overlays such as VPNs if needed).

[0043] For example, server application 104 may run on a single dedicated server computer, while data storage 106 may run on separate computers (accessing appropriate data storage resources). As an alternative example, server system 102 may be a scalable system configured to provide / de-utilize resources (e.g., server application 104) based on user demand. In this case, there may be multiple server computers (nodes) running multiple server applications 104 serving clients via a load balancer.

[0044] A single server system 102 is shown in the example networked environment 100. In some embodiments, client system 110 (and / or server system 102) may access additional server systems, such as third-party content servers that can be accessed by the client and server systems to obtain design elements that can be added to the design.

[0045] Client system 110 hosts client application 112. When client application 112 is executed by client system 110, client application 112 configures client system 110 as a server application 104 of server system 102, providing client functionality and interaction with it. Through client application 112, users can interact with server application 104 to perform various operations, such as creating, editing, saving, retrieving / accessing, publishing, and sharing designs.

[0046] Client application 112 can be a web browser application (such as Chrome, Safari, Internet Browser, Opera, or an alternative web browser application) that accesses server application 104 via an appropriate Uniform Resource Locator (URL) and communicates with server application 104 via a common World Wide Web protocol (e.g., http, https, ftp). Alternatively, client application 112 can be a specific application programmed to communicate with server application 104 using a defined Application Programming Interface (API).

[0047] In this example, the client system 110 also includes a text splitting module 114 and a transformation module 116. In the embodiments described below, the text splitting module 114 and the transformation module 116 perform (or the client application 112 is configured to perform) the processing associated with generating curved text.

[0048] The text splitting module 114 and / or the transformation module 116 can be software modules, such as add-ons or plug-ins that operate in conjunction with the client application 112 to extend its functionality. In an alternative embodiment, modules 114 and 116 can be local to the client application 112. In yet another alternative embodiment, modules 114 and / or 116 can be standalone applications that communicate with the client application 112 (running on the client system 110, server system 102, or an alternative server system).

[0049] Client system 110 can be any computer processing system configured (or configurable) by hardware and / or software to provide client functionality. For example, client system 110 can be a desktop computer, laptop computer, netbook computer, tablet computing device, mobile / smartphone device, personal digital assistant, or alternative computer processing system.

[0050] Despite Figure 1 Not illustrated, but client system 110 will typically have additional applications installed on it, such as at least one operating system application (e.g., a mobile operating system (if the client system is a mobile device), a desktop operating system (if client system 110 is a desktop system), or an alternative operating system).

[0051] The above description and Figure 1 The architecture illustrated in the diagram is provided as an example only. Many variations are possible.

[0052] For example, although modules 114 and 116 have been described and illustrated as part of / installed at client system 110, the functionality provided by modules 114 and 116 may alternatively be provided by server system 102 as an addition or extension to server application 104, a separate standalone server application communicating with server application 104, or a local part of server application 104.

[0053] Alternatively, the functionality provided by modules 114 and / or 116 can be performed by a cooperating client application (e.g., 112) and a server application (e.g., 104).

[0054] As a further alternative, the functionality provided by modules 114 and / or 116 can be provided as a completely separate service, for example, running on a server system separate from server system 102 and communicating with client application 112 (and / or server system 102) as needed to perform the effects functions described herein.

[0055] Furthermore, although the client-server architecture has been described, a content creation system including modules 114 and / or 116 (or otherwise configured to perform the processing described herein) can be provided in a self-contained application that is installed and runs only on a client system such as 110 without requiring any server application.

[0056] The features and techniques described herein are implemented using one or more computer processing systems.

[0057] For example, in the networked environment 100 described above, the client system 110 is a computer processing system (e.g., a personal computer, tablet / telephone device, or other computer processing system). Similarly, one or more computer processing systems (e.g., a server computer or other computer processing system) are used to implement the various functional components of the server system 102.

[0058] Figure 2 A block diagram is provided of a computer processing system 200 that can be configured to implement the embodiments and / or features described herein. System 200 is a general-purpose computer processing system. It should be understood that... Figure 2 Not all functional or physical components of the computer processing system are shown. For example, a power supply or power interface is not depicted; however, system 200 will carry a power supply or be configured to be connected to a power supply (or carry a power supply and be configured to be connected to a power supply). It will also be understood that a particular type of computer processing system will determine appropriate hardware and architecture, and alternative computer processing systems suitable for implementing the features of this disclosure may have more, differ from, or have fewer components than those depicted.

[0059] The computer processing system 200 includes at least one processing unit 202. The processing unit 202 may be a single computer processing device (e.g., a central processing unit, graphics processing unit, or other computing device), or it may include multiple computer processing devices. In some cases where the computer processing system 200 is described as performing an operation or function, all processing required to perform that operation or function will be performed by the processing unit 202. In other cases, the processing required to perform that operation or function may also be performed by a remote processing device accessible and usable by the system 200 (in a shared or dedicated manner).

[0060] Through communication bus 204, processing unit 202 communicates with one or more machine-readable storage (memory) devices that store instructions and / or data for controlling the operation of processing system 200. In this example, system 200 includes system memory 206 (e.g., BIOS), volatile memory 208 (e.g., random access memory such as one or more DRAM modules), and non-volatile memory 210 (e.g., one or more hard disks or solid-state drives).

[0061] System 200 also includes one or more interfaces, typically denoted by 212, through which system 200 connects to various devices and / or networks. Generally, other devices may be integrated with system 200 or may be separate. In the case of a device being separate from system 200, the connection between the device and system 200 can be established via wired or wireless hardware and communication protocols, and can be a direct or indirect (e.g., networked) connection.

[0062] Wired connections to other devices / networks can be established using any suitable standard or proprietary hardware and connection protocols. For example, System 200 can be configured to connect to other devices / communication networks via one or more of the following: USB; FireWire; Extended Serial ATA; Thunderbolt; Ethernet; OS / 2; Parallel; Serial; HDMI; DVI; VGA; SCSI; Audio port. Other wired connections are also possible.

[0063] Wireless connections with other devices / networks can be established similarly through any suitable standard or proprietary hardware and communication protocols. For example, system 200 can be configured to wirelessly connect with other devices / communication networks using one or more of the following: infrared; Bluetooth; WiFi; Near Field Communication (NFC); ​​Global System for Mobile Communications (GSM), Enhanced Data GSM Environment, Long Term Evolution (LTE), Wideband Code Division Multiple Access (W-CDMA), and Code Division Multiple Access (CDMA). Other wireless connections are also possible.

[0064] Generally, and depending on the specific system discussed, the devices connected to system 200 (whether wired or wireless) include one or more input devices that allow data to be input to / received by system 200 for processing by processing unit 202, and one or more output devices that allow data to be output by system 200. In this example, the input / output devices are connected to system 200 via one or more input / output device interfaces 214. Example devices are described below; however, it should be understood that not all computer processing systems will include all of the mentioned devices, and it is also appropriate to use more devices than those mentioned, as well as devices that replace those mentioned.

[0065] For example, system 200 may include or be connected to one or more input devices through which information / data is input to (and received by) system 200. Such input devices may include a keyboard, mouse, trackpad, microphone, accelerometer, proximity sensor, GPS device, etc. System 200 may also include or be connected to one or more output devices controlled by system 200 to output information. Such output devices may include devices such as displays (e.g., CRT, LCD, LED, plasma, touchscreen, or other displays), speakers, vibration modules, LEDs / other lights, etc. System 200 may also include or be connected to devices that can function as both input and output devices, such as memory devices (hard disk drives, solid-state drives, disk drives, compact flash cards, SD cards, etc.) from which system 200 can read data and / or write data, and touchscreen displays that can both display (output) data and receive touch signals (input).

[0066] For example, in the case where system 200 is a client system such as 110, it may include a display 218 (which may be a touch screen display), a camera device 220, a microphone device 222 (which may be integrated with the camera device), a pointing device 224 (e.g., a mouse, trackpad, or other pointing device), a keyboard 226, and a speaker device 228.

[0067] System 200 also includes one or more communication interfaces 216 for communicating with networks, such as network 120 of networked environment 100 (and / or local networks within server system 102)). Through communication interfaces 216, system 200 can transmit data to and receive data from networked devices, which may themselves be other computer processing systems.

[0068] System 200 can be any suitable computer processing system, such as a server computer system, desktop computer, laptop computer, netbook computer, tablet computer, mobile / smartphone, personal digital assistant, or alternative computer processing system.

[0069] System 200 stores or accesses computer applications (also called software or programs) that configure system 200 to receive, process, and output data when executed by processing unit 202; that is, computer-readable instructions and data. The instructions and data may be stored on a non-transitory machine-readable medium accessible to system 200. For example, the instructions and data may be stored on non-transitory memory 210. The instructions and data may be transmitted to / received by system 200 via data signals in a transmission channel (e.g., implemented via a wired or wireless network connection through an interface such as 214 or 216).

[0070] As mentioned above, applications accessible to system 200 typically include operating system applications.

[0071] System 200 also stores or accesses applications that, when executed by processing unit 202, configure system 200 to perform the various computer-implemented processing operations described herein. For example, and referring to the above... Figure 1 Network environment: Client system 110 includes (with modules 114 and 116) a client application 112 that configures client system 110 to perform the operations described herein.

[0072] In some cases, part or all of the given computer-implemented method will be performed by the system 200 itself, while in other cases, the processing may be performed by other devices that communicate data with the system 200.

[0073] As stated above, this disclosure generally relates to applying bending effects to design text elements. References Figure 3 This section provides an overview of the example user interface 300, through which users can create designs, add design elements (such as text elements) to the designs, apply effects to / remove effects from design elements, and adjust the effects applied to design elements.

[0074] However, it should be noted that the specific ways of creating designs and / or adding design elements to designs are not specifically related to this disclosure, and there are many alternative ways of doing so.

[0075] User interface 300 is displayed by client system 110 on its display 218 (client system 110 is configured to do so by client application 112).

[0076] Through interface 300, users can create design documents comprising one or more pages and, in particular, add design elements to these pages. The example design creation interface 300 includes a design creation pane 302 that displays the currently in-process design. In this example, the design creation pane 302 shows a single page 304 of the design document.

[0077] The design creation interface 300 also includes a design element search and selection pane 310, through which users can search or browse one or more design element libraries, view design element previews 314, and select design elements to include in the design document. To this end, pane 310 includes a search box 312 (allowing the user to enter search text) and design element previews 314 providing preview images of the design elements. The search function allows client application 112 to search for design elements in the local storage of client system 110, in the storage of server system 120, and / or in a third-party server system (not shown).

[0078] Design elements previewed in the search and selection pane 310 can be added to the ongoing design, for example, by dragging and dropping, double-clicking, hovering, or any other appropriate user interaction (e.g., added to page 304).

[0079] The design creation interface 300 also includes a toolbar 320 that provides various tools for design creation and editing. In this particular example, the tools include: a design element selection tool 322 that allows users to select specific design elements that have been added to page 304; a drawing tool 324 that allows users to draw design elements with geometric or other shapes; a text tool 326 that allows users to add text elements; and an import tool 328 that allows users to import design elements from another source (e.g., design elements stored on local or remotely accessible storage, design elements from a third-party server, etc.).

[0080] Although not shown, toolbar 320 will typically be an adaptive toolbar, as the tools provided change depending on what the user is doing. For example, if the user selects text tool 326, additional (or alternative) text-related tools may be displayed: such as font selection tools, font size tools, font style tools, font color tools, etc.

[0081] In this example, the toolbar 320 also includes an effects control 330, the activation of which (in this particular example) causes the effects control interface to be displayed. See below for reference. Figure 4 and Figure 5 Description of example effect control interface 400.

[0082] Generally, to create a design, a user creates a page and adds design elements to that page. Design elements can be added in various ways. For example, a user can interact with the design element search and selection pane 310 to search for / browse design elements and then add them to the design being created, for example, by selecting the design element preview 314, dragging it to a position on page 304, and dropping it. Alternatively, a user can create and add entirely new design elements, for example, by drawing the design elements using tools such as drawing tool 324, or by adding custom text using text tool 326. Further alternatively, a user can import design elements using import tool 328.

[0083] In this particular example, page 304 includes a single design element 340. Example design element 340 is a text element containing the letters T, e, x, and t. Text element 340 can be generated, for example, by a user activating a text tool (such as text tool 326), a user selecting a location on page 304 (e.g., by clicking or touching that location), and a user (e.g., via a physical or graphical user interface keyboard) typing the letters “T”, “e”, “x”, and “t”.

[0084] Interface 300 is provided as an example only, and alternative user interfaces (with replaceable user interface elements and controls) are possible.

[0085] Turning Figure 4 The example control interface 400 will be described.

[0086] In some implementations, an effect control interface, such as 400, is displayed in response to the activation of a specific user interface control (e.g., effect control 330 of user interface 300). In this case, the effect control interface 400 can be displayed in various ways.

[0087] For example, the effect control interface 400 can replace the display of the search and selection pane 310 of the user interface 300. In this case, activation of the design element search control will cause the search and selection pane 310 to be redisplayed and the effect control interface 400 to be hidden.

[0088] In an alternative implementation, the effect control interface, such as 400, can be displayed as a floating interface on top of other user interface elements and can be moved around by the user. In this case, the effect control 330 can be configured as a toggle control, with continuous activation causing the effect control interface to be displayed and hidden.

[0089] In another alternative implementation, the effect control interface, such as 400, can be displayed permanently (in which case, effect control 330 is not required).

[0090] The effect control interface 400 in this example includes multiple effect selection controls, each associated with a specific effect. In this case, four effect controls are displayed (402, 404, 406, and 408), but the number available may be fewer or more.

[0091] Through the effect control interface 400, users can apply specific effects to selected design elements or groups of design elements. For example, a user can select one or more elements that have been added to the design (e.g., by clicking or touching them on page 304), and then activate a specific effect selection control by clicking or touching (or approaching) the control 402.

[0092] Relatedly, the effect control interface 400 includes a curved text effect control 402. If the user has already selected a text element in the design (e.g., element 340), the user can select / activate the curved text effect control 402 to apply curvature to the selected text as described below.

[0093] As also described below, in some implementations, the curved text effect can be associated with user-adjustable parameters. In this example, selecting the curved text effect control 402 causes the display of parameter adjustment controls 410 for any user-adjustable parameter.

[0094] In this example, user-adjustable parameters for achieving the curved text effect include curvature (which can be adjusted by curvature adjustment control 410a), angle offset (which can be adjusted by angle offset adjustment control 410b), and text flip (which can be adjusted by flip text control 418).

[0095] In this particular example, the curvature and angle offset adjustment controls 410a and 410b each include a slider control with sliders 412a / 412b and handles 414a / 414b. A user can adjust the parameter in question by sliding the handles 414 along the slider 412. Each adjustment control 410 also includes a parameter value display 416 that displays the value corresponding to the value selected via the slider and / or allows direct input of the parameter value.

[0096] In this particular example, the flip text control 418 is a checkbox that can be active (e.g., selected) or inactive (e.g., deselected or unselected).

[0097] In this example, the curvature adjustment control 410a allows the user to define the level of curvature to be applied to a selected text string. In the described embodiment, the client application 112 configures the curvature adjustment control 410a to allow the user to select a curvature value between -100 and 100, and then uses the selected value to calculate the radius and create the curvature, as described below. In an alternative embodiment, the curvature adjustment control 410a can be used to directly define the radius.

[0098] In this example, the angle offset adjustment control 410b allows the user to define the circumferential position of the curvature applied to the text string. In this disclosure, the measured angle offset is between 0 and 360 degrees (or 0 to + / - 180 degrees), although alternatively defined offset units / positions can also be used. In this case, a 0-degree angle offset (which is the default angle offset) defines a circumferential position where the text appears to be curved around the top midpoint of a circle (e.g., 504 below), and increasing the angle offset moves the circumferential position clockwise around the circle. In this example, the slider 412b of the angle offset adjustment control 410b includes four predefined angle offset points to help the user identify / select commonly used offsets: a top (“T”) offset point (equivalent to a 0-degree angle offset); a right (“R”) offset point (equivalent to a 90 / - 270-degree angle offset); a bottom (“B”) offset point (equivalent to a 180 / - 180-degree angle offset); and a left (“L”) offset point (equivalent to a 270 / - 90-degree angle offset). Application 112 can be configured to initially set a default angle offset, such as 0 degrees (i.e., so the center of the text string is at the top of the circle that is ultimately defined by the curvature value).

[0099] In this example, the flip text control 118 is used to flip the text, as shown in the example below. Figure 5 As shown.

[0100] refer to Figure 5 A design 500 is provided, comprising text elements depicting the aforementioned angle offset and flip parameters. Design 500 includes five text elements, each with a bending radius of approximately 90 mm (displayed by circle 502, which may be temporarily displayed during the application / adjustment of the curved text effect but subsequently disappears / does not form part of the final design). Design 500 includes: a first curved text element 504 with an angle offset of 0 degrees and no flip; a second curved text element 506 with an angle offset of 90 degrees and no flip; a third curved text element 508 with an angle offset of 180 degrees and no flip; a fourth curved text element 510 with an angle offset of 180 degrees and flip; and a fifth curved text element 512 with an angle offset of 270 degrees and no flip.

[0101] Replaceable parameter adjustment controls can be provided. For example, parameters can be adjusted additionally (or alternatively) via a pop-up control that appears near the text string being adjusted. Figure 13 Examples of such controls are provided, including an angle offset control 1320 (which allows the user to rotate curved text and thereby adjust the angle offset) and a curvature manipulation block 1322 (which the user can use to expand or contract the curvature).

[0102] Figure 4 This is a specific example depicting the effects control interface 400. However, alternative user interface elements can be provided to activate / deactivate the curved text effect and / or adjust the effect parameters. As an alternative example, Figure 6 Describe a user interface 600 that allows activation / deactivation of effects and adjustment of parameters via a drop-down menu mechanism.

[0103] User interface 600 includes effect menu item 602. Effect menu item 602 is similar to effect control 330 of interface 300 described above.

[0104] Activating the Effects menu item causes the display of an Effects submenu 604, which includes an active Curved Text menu item 606. Selecting the Curved Text menu item 606 causes the display of a Curved Text Effects submenu 608, which includes: an activation / deactivation control 610 toggling a specific effect on / off, and related parameter controls 612 (in this example, an adjustment curvature control, an adjustment angle offset control, and a flip text control). Selecting the adjustment curvature or adjustment offset control can cause the display of further parameter adjustment controls (such as sliders or alternative controls as described above).

[0105] The process involved in applying a curved text effect to a selected design text element (i.e., a text string) will now be described.

[0106] Figure 7 This is a flowchart depicting the operations involved in selecting and applying the curved text effect to a text string.

[0107] At 702, client application 112 determines that the curved text effect has been activated. In this embodiment, as described above, client application 112 determines the activation of the curved text effect based on detecting user activation of a curved text effect control (such as 402 or 606).

[0108] In step 704, client application 112 determines the text string design element to which the curved text effect will be applied. For example, this could be a text string design element that was selected before the curved text effect control was activated. Alternatively, the user can select the text string design element immediately after activating the curved text effect control.

[0109] At 706, the client application 112 determines curved text parameters, such as (continuing from the above example parameters) curvature, angle offset, and a "flip" parameter.

[0110] In some embodiments, the client application 112 may be configured to set initial parameter values when activating the curved text effect control. For example, the client application 112 may set: a default curvature value of 50; a default angle offset of 90 degrees (such that the text curves around the top of the circle); a default flip value of off (such that the text is not flipped).

[0111] In some embodiments, the client application 112 may be configured to automatically calculate (or attempt to calculate) a suggested radius value based on the position of the selected text string relative to other design elements included in the design. The calculation of the suggested radius value is described below with reference to Figure 11

[0112] At 708, the text string is split into text string elements. In this embodiment, this is processed by the text splitting module 114. Each text string element is associated with a glyph (or has information usable to determine a glyph), that is, a displayed character / character set taking into account character attributes such as font type, font style, and font size.

[0113] As described above, in some embodiments, the client application 112 is configured to determine each individual character or explicitly combined character group in the text string as a distinct text string element.

[0114] In alternative embodiments, the client application 112 is configured to process the text string to determine whether any non-explicitly combined characters should be treated as a single element.

[0115] In either case, the client application 112 may be configured to split the text string into text string elements by calling a text shaping library that takes the text string as input and returns glyph indices and positions. Examples of such libraries are HarfBuzz and Allsorts.

[0116] In some embodiments, at 708, splitting the text string generates a text string element set (e.g., an array), and for each text string element, the text string element set (e.g., an array) includes an identifier of the character of the text string element and the glyph width of the text string element. For example:

[0117] [{<Unicode code point>, <glyph width>}, {…}, … {…}]

[0118] ​At 710, an element transform is calculated for each text string element determined at 708. In this embodiment, the element transform is calculated by the transform module 116. In this case, the element transform module is passed an element data set for each element that requires transformation. The element data set passed to the transform module may include, for example:

[0119] [<curvature>, <glyph width>, <glyph offset>, <string width>, <font size>]

[0120] In this element data set: curvature is a curvature parameter (set by the application 112 or a user); glyph width is the width of the glyph associated with the element (e.g., in pixels, which may be calculated or returned by a text splitting process); glyph offset is the x-coordinate at which the glyph of the element starts in the text string (e.g., calculated by summing the widths of preceding elements in the string); string width is the total width of the string (e.g., calculated by summing the widths of all elements in the string); and font size is the size of the font. Where angular offset and / or flip are provided as parameters (e.g., as opposed to all curved text initially created with a default offset such as 90 degrees and a default flip value such as none), the element data set may also include angular offset and / or flip parameters.

[0121] In this embodiment, the element transform is defined by a rotation (e.g., a value in degrees), an x-coordinate (e.g., a value in pixels), and a y-coordinate (e.g., a value in pixels). Accordingly, the transform calculated for a given text string element may take a form such as:

[0122] [<rotation>, <x-coordinate>, <y-coordinate>]

[0123] The calculation of the rotation value, x-coordinate value and y-coordinate value according to this embodiment is as follows.

[0124] The input parameters are a curvature value "c", a font size "f" and a linear text width "w".

[0125] As described above, the curvature value in this embodiment is a value between -100 and 100. In this case, the input curvature value (c i ) is initially mapped to a mapped curvature value (c m ) (although this may be performed at 706 or another point in the process). This mapping is performed so that the operation of the curvature slider control appears more linear to the user. The mapped curvature value in the example is calculated according to the following formula:

[0126] c m =tan(c i ) / tan(1)

[0127] In an alternative embodiment, the mapping from the input curvature value to the mapped curvature value is not performed. In this case, the following calculation can still be used: using the input curvature parameter (c i The reference replacement of the mapped curvature value (c) m (referencing)

[0128] The angle change δA is also calculated. The angle change is a value indicating the change in angle per horizontal pixel in the original linear text string. In this embodiment, the angle change is calculated as follows:

[0129] δA = absolute value (c m *2)*(16 / f)

[0130] In this formula, the multiplier 2 can be set to different values ​​to change the degree of curvature. The inventors have confirmed that the multiplier 2 is a value that provides aesthetically pleasing results for text strings of different lengths and sizes.

[0131] Including a (16 / f) multiplier to normalize the curvature according to the font size. Therefore, for the same curvature value c, text with a font size of (for example) 18 (see...) Figure 8 (802) will ultimately have text with a font size of (for example) 48 (see 802) Figure 8 The same curvature as 804).

[0132] The perimeter can be calculated using the change in angle value δA.

[0133] Circumference = 360 / δA

[0134] The radius can be calculated from the perimeter:

[0135] r = perimeter / (2*π)

[0136] The arc angle (the arc angle is the angle occupied by the text string once it bends) can be calculated from the radius:

[0137] Arc angle = 360 * (w / circumference)

[0138] To illustrate these calculations, consider Figure 9 Example linear text 902 (not scaled): “150px wide”. In this example, it is assumed that the mapped curvature is c. m =0.3, font size f=16 and text string width w=150 pixels. In this case:

[0139] δA = absolute value (0.3 * 2) * (16 / 16) = 0.6

[0140] Perimeter = 360 / 0.6 = 600 pixels

[0141] Radius = 600 / (2 * π) = 95.48 pixels

[0142] Arc angle = 360 * 150 / 600 = 90 degrees

[0143] Therefore, once bent, the linear text string 902 will occupy 90 degrees (or a quarter) of the circle (see 904).

[0144] If the calculated arc angle is greater than 360 degrees, then client application 112 determines that the text string is too long for the curvature. Client application 112 can be configured to respond to this determination in various ways.

[0145] For example, in some embodiments, client application 112 is configured to generate and display a “text string too long” error message and stop processing until (or if) a new curvature value is selected.

[0146] In an alternative embodiment, client application 112 is configured to attempt to automatically increase the curvature value so that the text string is not too long (e.g., so the arc angle is <= 360 degrees). In this case, client application 112 may also generate and display a message notifying the user of this, such as "Adjust curvature to fit text length".

[0147] In yet another embodiment, client application 112 is configured to truncate the text string such that the remaining elements do not produce an arc angle exceeding 360 degrees. For example, this might involve removing elements from the end of the text string until the arc angle value is less than 360 degrees. In a variation of this embodiment, client application 112 may be configured to truncate the text string by removing elements until the remaining elements, plus an additional, automatically added truncation glyph (e.g., "..." or an alternative truncation glyph), produce an arc angle value less than 360 degrees. In this case, the truncation glyph indicates to the user that the text string is too long for the selected curvature. Figure 10 An example of a linear text string 1002 that is too long for the selected curvature is provided. In this case, the corresponding curved text element 1004 has been truncated, and the truncated glyph "..." has been added to the end of the remaining text string.

[0148] Alternative ways to handle text strings that are too long for the curvature are possible. For example, client application 112 can be configured to fade out the text when it approaches 360 degrees and not display any text that will exceed 360 degrees.

[0149] The values ​​above, once calculated, are used to calculate the rotation, x-coordinate, and y-coordinate of text string elements.

[0150] In this example, the initial rotation of a given element is calculated based on its position within the linear text string (i.e., the glyph offset), the element's glyph width, and the change in angle δA:

[0151] Initial rotation = δA * (glyph offset + (element glyph width / 2))

[0152] The initial rotation can be calculated without the "+(element glyph width / 2)" term, but in this case, the element's glyph will rotate around the corner (top left corner) rather than the midpoint of the glyph.

[0153] To make the text string containing a given element appear as if it's curved around the top of a circle (e.g., a 90-degree angular offset), the final rotation is calculated by subtracting the calculated arc angle from the character's initial rotation angle and dividing by 2. For example, if the initial rotation calculated according to the equation above is 20 degrees, and the total arc angle of the chord is 90 degrees, then 45 degrees (arc angle / 2) will be subtracted from the calculated rotation, resulting in a final rotation of -25 degrees.

[0154] When angular offset and / or flip are provided as parameters, an additional angular offset is added when calculating the final rotation. For example, to make the text appear as if it curves around the right-hand side of a circle (e.g., according to...), Figure 5 (506), will add 90 degrees.

[0155] Therefore, more generally, the final rotation of the text string elements can be calculated as:

[0156] Final rotation = (δA * (glyph offset + (element glyph width / 2)) – arc angle / 2 + angle offset

[0157] Using the final rotation of the elements, the x and y coordinates can be calculated:

[0158] x-coordinate = radius * cos(final rotation of the element)

[0159] y-coordinate = radius * sin(final rotation of the element)

[0160] At 712, once the element transformations have been calculated for all elements, client application 112 can render the curved text string. Client application 112 renders the curved text string by rendering the glyphs defined / associated with each text string element based on the element transformation. In this embodiment, and as an example, client application 112 renders the curved text string in its own HTML. Each element is presented within a container that applies CSS transforms to position and rotate the glyphs defined by the elements as needed based on the element's rotation, x-coordinate, and y-coordinate.

[0161] To apply the transformation, the x-coordinate of the element transformation is added to the x-coordinate of the point in the selected text string.

[0162] If the text is to have positive curvature (i.e., to look like it's curved around the top of a circle), the calculated radius is added to the y-coordinate of the element transformation.

[0163] If the curvature of the text is negative (for example, it looks like it's curved around the bottom of a circle), then the y-coordinate of the transformation is adjusted differently. Specifically, the topmost y-coordinate is determined (for negative curvature, this would be the y-coordinates of the first and last elements), and the topmost y-coordinate is subtracted from the y-coordinates of the element transformations.

[0164] After 712, the input text string has been rendered as a curved text string. At this point, the user can choose to retain the curved text string (e.g., by selecting different elements in the design or user interface controls) or change the curved text string (e.g., by disabling the curved text effect control 402 to reject the curved text string while the curved text string is selected).

[0165] If relevant changes are made to the selected text string, its attributes, and / or curved text parameters, some or all of the above processes can be re-executed.

[0166] In this embodiment, if a change that could affect splitting the text string into elements is received (at 714), the process returns to 708 to re-split the text string. Such changes include, for example, the user changing characters in the original text string (e.g., adding / removing characters) and / or changing the font of the original text string.

[0167] If (at 716) a change is received that does not affect the splitting of text string elements but may affect the transformations (e.g., rotation and / or position) of the text string elements, then processing returns to 710 to recalculate the element transformations before rendering the new curved text string. Such changes may include, for example, changing the font size of the original text string and / or adjusting one or more curved text parameters (e.g., curvature, angle offset, flip).

[0168] Although the specific equations for calculating character rotation and position have been described above, alternative equations are also possible.

[0169] Furthermore, the equation given above [δA = absolute value (c)] m *2)*(16 / f)] Typically, a relationship is established between three variables: curvature value (c i or c m The equation (and others described above) can be used to provide other curved text effects, including the radius (via δA) and font size.

[0170] As an example, a "semicircle" control (e.g., as a "semicircle" parameter control in an effect control interface such as 400) can be made available to the user. If the "semicircle" control is selected, it causes application 112 to display the selected text string as a semicircle. To do this, application 112 can use the formula above and the width, radius (as described below, automatically determined based on the default curvature or the curvature selected by the user), and a fixed arc angle of 180 degrees of the selected text string to calculate the font size that will cause the text string to occupy a semicircle.

[0171] Similarly, controls that allow other fixed arc angles can be provided, such as a full circle control. When the full circle control is selected, it calculates the font size that causes the selected text string to occupy the entire circle (arc angle = 360 degrees). Alternatively, an arc angle selector control can be provided that allows the user to select any arc angle between 0 and 360 degrees, causing the selected text string to occupy the selected arc angle. Such a control could be a slider control as described above.

[0172] To illustrate the operation of process 700, consider the selected text string "Text" with a curvature value of 1 and a font size of 16 pixels.

[0173] In 708, the text string elements are determined to be ["T", "e", "x", "t"] and are determined to have corresponding widths of [9.9375, 8.09375, 8.3046875, 5.6640625].

[0174] The input to operation 710 (which can be performed by transformation module 116) can be a dataset such as the following:

[0175]

[0176]

[0177] The processing at 710 can then generate element transformations such as the following:

[0178]

[0179]

[0180]

[0181] In 712, these transformations can be used to generate HTML elements that render elements such as those below (where attributes unrelated to curved text positioning, such as color, have been omitted):

[0182]

[0183] As described above, in some embodiments, client application 112 may be configured to automatically calculate (or attempt to calculate) a suggested radius value for the text string based on the text string's position relative to other design elements in the design.

[0184] Figure 11 A flowchart is provided indicating the operations involved in the radius value calculation process 1100. Process 1100 may be invoked, for example, as part of the aforementioned operation 706 (determining the bending text parameters).

[0185] In some embodiments, the suggested radius calculation can be enabled / disabled by user-configurable application settings. If enabled, the suggested radius calculation process 1100 is executed automatically. Otherwise, the suggested radius calculation process 1100 is not executed automatically (although it can still be triggered manually by the user).

[0186] In step 1102, identify or access existing curved element data. Existing curved element data refers to data about other curved design elements on the same design page as the selected text string.

[0187] Existing bending elements can be elements of defined types, such as elements as circles (or approximate circles), elements as arcs or defined arcs (e.g., semicircles or other radial sections).

[0188] For an existing curved element, the existing curved element data can include position data and height data. Position data is data that allows identification of the location of the existing curved element. For example, the position data of an existing curved element could be the x and y coordinates defining the origin of the existing curved element. Height data is either the height of the existing curved element, or data that allows determination of the height of the existing curved element (e.g., radius, diameter, element height, transformations such as twist / skew that can affect the height, and / or other data that allows determination of the height).

[0189] Existing bending element data can be determined in various ways and by client application 112 and / or server application 104.

[0190] When a page includes vector design elements, client application 112 or server application 104 can be configured to analyze page data to determine if any vector elements define a curved element of a defined type. For each vector element that defines a curved element, relevant data can be accessed (or calculated) based on the element's vector definition. For example, in SVG format, <circle>The tag defines a circular vector element and includes the "cx" attribute (defining the x-coordinate of the origin), the "cy" attribute (defining the y-coordinate of the origin), and the "r" attribute (defining the radius).

[0191] When a page includes raster design elements, client application 112 or server application 104 can process the page (or raster elements on it) to detect existing curved elements and extract / calculate curved element data. As an example, to detect an existing curved element that is a circle, a circle detection algorithm such as the Hough circle detection algorithm can be used. This algorithm can be applied to (and / or other algorithms can be used) to detect other types of existing curved elements (e.g., semicircles, arcs, etc.). Processing raster data to detect curved elements typically requires more processing than processing vector elements. Therefore, if raster elements need to be processed, client application 112 can request a server application (such as 104) to perform this processing and return the relevant data.

[0192] In some embodiments, determining existing bending element data at 1102 may be limited to determining only existing bending vector element data. In other embodiments, 1102 may include determining only existing bending grating element data. In other embodiments, 1102 may include both gratings and vector elements.

[0193] When processing a design page to determine existing curved elements, the data results can be saved in the existing curved element dataset for future access. However, if other elements are added to the page, it may be necessary to reprocess (or partially reprocess) the page to keep the dataset up-to-date.

[0194] At 1104, the client application 112 determines whether the selected text string is spatially related to any existing curved element determined at 1102.

[0195] In this embodiment, alignment and separation criteria are used to determine whether the text string is spatially related to existing curved elements.

[0196] In this example, the alignment criterion involves vertical alignment. In this case, client application 112 determines the alignment criterion based on whether the horizontal midpoint of the text string (e.g., the x-coordinate of the middle or approximately middle of the text string) is vertically aligned with the horizontal midpoint (e.g., the x-coordinate of the origin) of the existing curved element.

[0197] If the horizontal midpoint of the text string (e.g., the x-coordinate of the middle or approximately middle of the text string) is vertically aligned with the horizontal midpoint of the existing curved element (e.g., the x-coordinate of the origin), then client application 112 determines that the text string is vertically aligned with the existing curved element. In determining the vertical alignment, client application 112 may consider alignment tolerances—for example, if the horizontal midpoint of the text string is within the (+ or -) alignment tolerance of the horizontal midpoint of the existing curved element, then client application 112 will determine that they are vertically aligned.

[0198] Client application 112 determines the separation criterion based on whether the distance between the text string and existing elements is within the defined separation distance.

[0199] For example, the distance between the text string and an existing curved element can be calculated as the absolute value of the text string's y-coordinate (e.g., the vertical midpoint or other y-coordinate of the text string) minus the y-coordinate of the existing element (e.g., the y-coordinate of the origin of the existing element). Alternatively, the distance can be calculated based on the x and y coordinates of the text string (e.g., the center of the text string) and the existing element (e.g., the origin)—for example, by using the Pythagorean theorem (square root((text string x - existing element x))). 2 + (text string y - existing element y) 2 )).

[0200] In this embodiment, client application 112 determines the defined separation distance based on the size of the particular existing curved element in question—for example, such that a relatively large separation distance will be determined for larger existing elements, and a relatively small separation distance will be determined for smaller existing elements. As a specific example, client application 112 can calculate the defined separation distance of a particular existing element by multiplying the radius (or height) of the existing element by a multiplier (e.g., 1.1, 1.2, 1.3, or an alternative multiplier).

[0201] If the text string is spatially independent of any existing curved elements, an automatic curvature value cannot be calculated. In this case, client application 112 returns the default curvature value at 1106.

[0202] If the client application 112 determines that the text string is spatially related to an existing curved element (e.g., both alignment and separation criteria are met), then the processing proceeds to 1108.

[0203] In step 1108, client application 112 calculates the suggested radius. The suggested radius is the distance between the text string and the existing curved element (as described above). Client application 112 can also map the calculated radius back to a curvature value (e.g., a value between -100 and 100), which can then be displayed on a slider control or similar. This calculation can be performed by reversing the above calculation.

[0204] At 1110, the suggested radius is then returned, and it can be used to calculate the element transformation as described above.

[0205] To illustrate the operation of the suggested radius, consider Figure 12 The curved text element and the existing circular element are shown.

[0206] In Example 1202, it is determined that the text string 1204 ("your paragraph text") is spatially related to the existing curved element 1206. In this case, the client application 112 automatically calculates the suggested radius and displays the text string (1208) with the curved effect applied.

[0207] In Example 1210, it is determined that the text string 1202 ("your paragraph text") is spatially unrelated to the existing curved element 1214. In this case, the client application 112 uses the default curvature (which is unrelated to the existing element 1214) to apply the text effect to the text string (1216).

[0208] Further diagrams of the suggested radius are as follows: Figure 13 As shown. In Figure 13 In the three examples (1302, 1304, and 1306), the selected text string 1308 is the same, and the existing curved element 1310 is the same. However, in each example, the position of the selected text string 1308 relative to the existing curved element 1310 is different (although in all three examples, the text string 1308 is determined to be spatially related to the existing curved element 1310). In example 1302, the selected text string 1308 is positioned inside the existing curved element, so a relatively small radius is suggested / used for the curved effect (see 1312). In example 1304, the selected text string 1308 is positioned on top of the existing curved element, and therefore a larger radius is suggested / used for the curved effect (see 1314). In example 1306, the selected text string 1308 is positioned outside the top of the existing curved element, and therefore a larger radius is suggested / used for the curved effect (see 1316).

[0209] In 1104, if the client application 112 determines that the text string is spatially related to multiple existing curved elements, various methods can be employed.

[0210] In one approach, the client application is configured to select an existing element such as (based on the depth / z-index of the candidate element) the existing element closest to the foreground; (based on distance) the existing element closest to the text string; and / or based on other selection criteria.

[0211] In another approach, the client application is configured to calculate and return suggested radii for all existing elements spatially related to the text string. In this case, the client application 112 can use the suggested radii in, for example, by displaying each curvature as a snap point, allowing the user to easily select one of the suggested radii to see how the text string will appear with that curvature; displaying multiple text strings with the suggested radii applied and allowing the user to select one of the curved text strings (or reject all text strings); or in an alternative manner.

[0212] In a further embodiment, application 112 can be configured to automatically determine whether the text string is spatially related to one or more existing curved elements when a user (e.g., by dragging or other input) moves the text string around the design page. In this case, application 112 dynamically determines whether the text string is spatially related to any existing curved elements based on the current position of the selected / moved text string (according to 1104). If the current position results in the text string being spatially related to an existing curved element, application 112 calculates a suggested radius (according to 1108) and can automatically display the text string (or another version thereof, such as a shadow, partial transparency, or other version) based on the calculated curvature. This allows the user to move the text string around the design page and see it "suddenly move" to a curvature calculated based on existing curved elements on the design page.

[0213] The flowcharts illustrated in the accompanying figures and described above define operations in a specific order to explain various features. In some cases, the described and illustrated operations may be performed in a different order than those shown / described, one or more operations may be combined into a single operation, a single operation may be divided into multiple separate operations, and / or the functionality implemented by one or more described / illustrated operations may be implemented by one or more alternative operations. Furthermore, the functionality / processing of a given flowchart operation may be performed by different systems or applications.

[0214] Unless otherwise stated, the terms "comprising" and "including" (and variations thereof, such as "including," "included," "containing," "contained," "included in," "included in," etc.) are used inclusively and do not exclude further features, components, integrals, steps, or elements.

[0215] It should be understood that the embodiments disclosed and defined in this specification extend to alternative combinations of two or more individual features mentioned in or apparent from the text or drawings. All these different combinations constitute alternative embodiments of this disclosure.

[0216] This specification describes various embodiments with reference to numerous specific details that may vary depending on the implementation. Any limitation, element, attribute, feature, advantage, or property not expressly stated in the claims should not be considered as an essential or necessary feature. Therefore, the specification and drawings should be considered illustrative rather than restrictive.< / circle>

Claims

1. A computer-implemented method, comprising: Detects the activation of the curved text effect for the selected text string related to the design; Determine the radius; The selected text string is processed to split it into one or more text string elements, each text string element being associated with a glyph; Calculate an element transformation for each text string element, including element rotation data and element position data, the element transformation being based on the radius; as well as For a given text string element, each text string element is presented by representing the glyph associated with that given text string element based on the element transformation calculated for that given text string element. Determining the radius includes automatically determining the radius using existing bending elements based on the design: Access the bending element data for existing bending elements in the design; Based on the curved element data, determine whether the selected text string is spatially related to a specific existing curved element; as well as In response to determining that the selected text string is spatially associated with the specific existing curved element, the radius is calculated based on the curved element data associated with the specific existing curved element.

2. The computer-implemented method according to claim 1, wherein, The radius is calculated based on the position of the selected text string relative to the specific existing curved element.

3. The computer-implemented method according to claim 1, wherein, Determining whether the selected text string is spatially related to the particular existing curved element includes: Determine whether the selected text string is aligned with the specific existing curved element.

4. The computer-implemented method according to claim 3, wherein, Determining whether the selected text string is aligned with the specific existing curved element includes: determining whether the horizontal midpoint of the selected text string is within the alignment tolerance of the horizontal midpoint of the specific existing curved element.

5. The computer-implemented method according to claim 3, wherein, Determining whether the selected text string is spatially related to the particular existing curved element includes: Determine whether the selected text string is within the defined separation distance of the particular existing curved element.

6. The computer-implemented method according to claim 5, wherein, The defined separation distance is based on the size of the specific existing bending element.

7. The computer-implemented method according to claim 1, further comprising: The bending element data is generated as follows: Process the design to identify any existing bending vector elements included in the design; as well as Generate bending element data for each identified existing bending vector element.

8. The computer-implemented method according to claim 1, further comprising: The bending element data is generated as follows: Process the design to identify any existing curved grating elements included in the design; as well as Generate bending element data for each identified existing bending grating element.

9. The computer-implemented method according to claim 1, further comprising: Determine an angular offset, which defines a circumferential position, and wherein the element transformation for a given text string element is calculated additionally based on the angular offset.

10. The computer-implemented method of claim 1, wherein processing the selected text string to split the selected text string into one or more text string elements includes processing the selected text string such that each text string element is a character or an explicitly defined group of characters of the selected text string.

11. The computer-implemented method according to claim 1, wherein: Processing the selected text string to split it into one or more text string elements includes processing the selected text string using a text shaping library; as well as At least one text string element includes multiple characters from the selected text string, wherein the multiple characters from the selected text string are not an explicitly defined character group of the selected text.

12. A computer processing system, comprising: Processing unit; monitor; and A non-transitory computer-readable storage medium for storing instructions, which are executed by the processing unit, such that the processing unit: Detects the activation of the curved text effect for the selected text string related to the design; Determine the radius; The selected text string is processed to split it into one or more text string elements, each text string element being associated with a glyph; Calculate an element transformation for each text string element, including element rotation data and element position data, the element transformation being based on the radius; as well as For a given text string element, each text string element is presented on the display by presenting the glyph associated with the given text string element based on the element transformation calculated for the given text string element, wherein determining the radius includes automatically determining the radius based on existing curved elements of the design: Access the bending element data for existing bending elements in the design; Based on the curved element data, determine whether the selected text string is spatially related to a specific existing curved element; and In response to determining that the selected text string is spatially associated with the specific existing curved element, the radius is calculated based on the curved element data associated with the specific existing curved element.

13. The computer processing system according to claim 12, wherein, The radius is calculated based on the position of the selected text string relative to the specific existing curved element.

14. The computer processing system according to claim 12, wherein, Determining whether the selected text string is spatially related to the particular existing curved element includes: Determine whether the selected text string is aligned with the specific existing curved element.

15. The computer processing system according to claim 12, wherein, The execution of the instruction also causes the processing unit to: determine an angular offset, the angular offset defining a circumferential position, and wherein the element transformation for a given text string element is calculated additionally based on the angular offset.

16. The computer processing system according to claim 12, wherein: Processing the selected text string to split it into one or more text string elements includes processing the selected text string using a text shaping library; as well as At least one text string element includes multiple characters from the selected text string, wherein the multiple characters from the selected text string are not an explicitly defined character group of the selected text.

17. The computer processing system according to claim 12, wherein, Determining whether the selected text string is aligned with the specific existing curved element includes: determining whether the horizontal midpoint of the selected text string is within the alignment tolerance of the horizontal midpoint of the specific existing curved element.

18. The computer processing system according to claim 12, wherein, Determining whether the selected text string is spatially related to the particular existing curved element includes: Determine whether the selected text string is within the defined separation distance of the particular existing curved element.

19. The computer processing system according to claim 18, wherein, The defined separation distance is based on the size of the specific existing bending element.

Images