Comments (13)
Yes, it's similar. But my solution is not perfect as is, and requires some improvements (especially when there are "bridges" with disturbing points around it). So any other solution may help!
I noticed the same thing - whenever there's a bridge there's likely to be a tiny distorted curve, typically less than 2px in length, that throws off all the tangent calculations. I tried to get around that by calculating the tangent using getPointAtLength() and looking a few pixels back from the clip points. That way it doesn't matter if there's a tiny distorted path curve in the pathstring.
from makemeahanzi.
I've just about gotten your work integrated into the tool, @chanind - once it's in, we'll have the corrections applied to the SVGs too, and future runs will be incremental and fast. The server data migration is taking an hour on my machine though!
from makemeahanzi.
I think it should be possible to do programmatically. Maybe something like for every stroke that's clipped, search through all the other characters in the dataset for the closest looking stroke and try to use the end from that stroke? I'll experiment with this if I have some time.
from makemeahanzi.
I made a try with a simple algorithm that replaces every straight line by a cubic Bezier curve.
- The start point of the Bezier curve is the start point of the straight line.
- The end point of the Bezier curve is the end point of the straight line.
Assuming d = (length of the straight line)/3 (or /2): - The first handle of the Bezier curve is placed at the distance of d from the start point of the straight line on the tangent of the curve that ends at the start point of the straight line.
- The second handle of the Bezier curve is placed at the distance of d from the end point of the straight line on the tangent of the curve that starts at the end point of the straight line.
Note: computing the tangent of a bezier curve is trivial
I put online a demo at http://gooo.free.fr/animCJK/all.php. Select the "brush" checkbox, 512 or 1024px radio input and Hsk hanzi (China) radio input. Then enter a hanzi in the data field or select a hanzi in the list on the bottom of the page.
The result is not always perfect (mostly because the svg data have some defects such as very short curves) but seems acceptable most of the time.
from makemeahanzi.
It looks like you beat me to it! I made a similar attempt here: #32. I suspect we're doing almost the same thing
from makemeahanzi.
And done as of e0089f7!
I'll probably run the stroke-caps logic one more time to get those last few stragglers, and then from now on, the tool will run it twice (heh) on every character whenever it's updated.
from makemeahanzi.
@chanind, do you have a script/programmatical approach in mind or do you consider SVG editing by hand ? Just to know.
from makemeahanzi.
CDL has a cascading system between files. It maybe the way to go somedays. The transformation bounding-box's of the component is the current bounding box of its strokes.
from makemeahanzi.
This would be a nice enhancement, and I thought about algorithms for it a while back.
One approach here is to use more data from the "bridges" data structure that is the key to breaking the original glyph down into stroke components. I've drawn some of the bridges for the example character from above in this diagram:
Using some geometry, every time a stroke boundary hits a bridge, we could automatically create two quadratic Bezier curve that smoothly interpolates between the stroke's angle on the two sides of that bridge. For simple bridges which are collinear with the stroke itself, this interpolation would just be a line, but for the bridge up near the top-left of that character, it would come close to a point as you'd expect. There is a third case for the diagonal strokes in 木, where the two angles actually spread apart, but I think the same math would cover all three.
The geometry here is a bit finicky to get right, which is why I never got around to doing it. But the point is that I think this piece is doable without manually drawing any curves and without needing to use decompositions.
from makemeahanzi.
There are some special cases such as the 6th stroke of 者.
from makemeahanzi.
If you want to test the algorithm using the makeMeAHanzi data, just get the javascript strokeBrushing() function from the code of http://gooo.free.fr/animCJK/all.php and apply it to makeMeAHanzi stroke paths just before displaying them. This function adds to a makeMeAHanzi stroke path brush-like start and end.
from makemeahanzi.
chanind: It looks like you beat me to it! I made a similar attempt here: #32. I suspect we're doing almost the same thing
:-)
Yes, it's similar. But my solution is not perfect as is, and requires some improvements (especially when there are "bridges" with disturbing points around it). So any other solution may help!
from makemeahanzi.
Thanks for your work getting this merged into the tools branch! It looks great!
from makemeahanzi.
Related Issues (20)
- 试用了一下,小程序报eval安全策略的错误
- 如何创建不存在的汉字,让我们一起做贡献吧 HOT 10
- adopt for Dart and Flutter HOT 3
- The radical of "平" is wrong
- All this data is for simplified or traiditional Characters?
- Could you update this branch tool meteor version
- 翰 The stroke sequence is wrong
- Wrong stroke order for 隨
- 葉 stroke order
- How do other sites draw so many characters that aren't in these dictionaries? HOT 2
- Fill the stroke with a color gradient based on the stroke animation direction HOT 1
- What's the logic behind the ordering of the two files? HOT 1
- Missing strokes for 齁 嘡 藠 嗞 馃 瘆 拃 揳 齉 抔
- The number of strokes in Chinese character classification
- Any method to draw strokes with python instead of web page?
- 如何添加英文字母,或者数字的数据呢?~~~用工具貌似无法进行下一步 HOT 3
- 大佬们,这个项目如何启动啊,想修改部分汉字的笔画顺序,有没有办法啊
- How should I cite this work? HOT 2
- 如何判断是否支持某个汉字? HOT 1
- Stroke Numbers Upside Down HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from makemeahanzi.