search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.08k stars 3.45k forks source link

Gradual font color #7535

Open fangyinghua opened 2 years ago

fangyinghua commented 2 years ago

Version

4.6.0

Test Case

http://jsfiddle.net/fangyinghua/sd9nmr6k/17/

Information about environment

Which browsers? google

Steps to reproduce

  1. Select the gradient textBox （splitByGrapheme：true）；
  2. Drag the control points in the upper left corner, lower left corner, left, right, lower right corner, upper right corner, etc., it will become stuck and even the browser will exit；Google browser

Expected Behavior

Like non-gradient fonts, select the object and drag the control points on the side will not freeze

Actual Behavior

too much text or font spacing is set, dragging becomes stuck

asturur commented 2 years ago

fiddle is empty

asturur commented 2 years ago

( i will reopen when a working fiddle is added )

fangyinghua commented 2 years ago

Sorry, I just saw it already written.

asturur commented 2 years ago

image

sadly you are hitting a super slow path. The text does not work as shapes, in order to render the text with gradient we need to make a pattern of the gradient and then use that. Probably we can improve the code to resize the gradient numbers instead of rasterizing it in a pattern.