Comments (16)
It probably makes sense to polish the canvas PR and allow it to be enabled as a config option, something like { renderer: 'canvas' }
. I'm worried about switching over fully since there are likely users relying on CSS to style the SVG output like in #87. I'll put together a PR adding the canvas renderer as a config option.
from hanzi-writer.
Another possible difference is using SVG clip-path instead of SVG mask to control the way the stroke looks while animating. I think clip-path should have better performance, but the reason I didn't switch to it fully is because using clip-path doesn't allow adding stroke width, and currently there's small gaps between overlapping strokes in the data from make me a hanzi (skishore/makemeahanzi#28). I want to try working on adding caps to the strokes from make me a hanzi when I have some time. If that issue can be resolved we can switch to using clip-paths for everything.
Could you try setting usePolygonMasks: true
in Hanzi Writer? This uses clip-path instead of mask but does more work in javascript to try to calculate a wider clipping path to avoid the stroke gap issue. It might result in smoother animations if mobile is slow due to SVG performance.
from hanzi-writer.
Just seen in the code that Inkstone
is using createjs which uses canvas and enable all WebGL niceties and use the GPU mostly.
from hanzi-writer.
oooh interesting I hadn't considered using canvas. That could be worth investigating - it would certainly have better performance than SVG, but probably requires a fair bit of extra work to translate the SVG path strings from Make me a Hanzi into canvas pixels.
from hanzi-writer.
setting usePolygonMasks
to true
didn't change anything on my test mobile phone.
from hanzi-writer.
A valuable comparison on SVG vs Canvas: https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/
from hanzi-writer.
I wouldn't be surprised if we could have most of both world by off-loading a lot to CSS animation that will be able to use hardware acceleration and keep SVG and crisp rendering. That would at least worth a try in my opinion.
from hanzi-writer.
I wonder if it's just that SVG performance isn't great on mobile. How do some of the SVG images from Make me a Hanzi look on mobile? They're using CSS to generate the animations: https://github.com/skishore/makemeahanzi/tree/master/svgs
from hanzi-writer.
Another possibility is that maybe having to calculate opacity for the highlight layer and the other hidden layers is straining on mobile. Maybe if we set display: none
on elements after their opacity is 0 that might boost performance too?
from hanzi-writer.
The SVGs from makemeahanzi are not animated at all. I guess these CSS animation are not supported. I'll tinker a little more, but this is very possible that only a few CSS operations are supported... as I found out that CSS scale is not supported on my end. Android 4.4 is now fairly old, but I guess it is still an important target.
For the record, I tested in my app (a java based very simple app that only opens a webview on a provided index.html containing all the javascript) on my Galaxy Note 4 that I blocked on Android 4.4 . I basically added the svg as an <img src="">
... (which perfectly plays the animation on my desktop Firefox) so I'll try other ways to include this svg to be sure.
from hanzi-writer.
Ah darn, it might be the case that SVG css animations aren't supported in older browsers. I think canvas should actually be pretty easy to implement though - it looks like there's a path
element in canvas that can accept SVG path strings, and canvas supports clipping and transforms too. That should be everything we need for Hanzi Writer to work with canvas instead.
from hanzi-writer.
I made a proof-of-concept PR using canvas rendering here: #57. Does this perform better on your device? You'll need to build the dist files in that PR before testing. When I was testing in Chrome it appeared to have worse performance than using pure SVG, but it could be that Chrome has really optimized SVG rendering. It's also possible it needs more tweaking to optimize canvas rendering fully.
from hanzi-writer.
Hello @chanind
I used your POC on a heavy page, that I open Hanzi Writer as a popup.
For my page, the Canvas version had a huge performance impact.
I recorded 2 videos in the same page, to demonstrate it.
SVG Version:
https://youtu.be/4M7Lo2Gt7eE
Canvas Version:
https://youtu.be/QF2mwjMPw-k
Thank you for your work.
What do you think is missing on the Canvas version?
from hanzi-writer.
The Canvas version should work, but when I tested it using Chrome developer tools it didn't seem to perform as well as the SVG version. It could be that Chrome is just really optimized for SVG rendering. Which browser is that in the video? It looks like a webview on Android?
from hanzi-writer.
It's a PWA running on Google Chrome 70, Android 8.0, Moto Z2 Play
from hanzi-writer.
Great! Thank you!
I just found a bug on the Canvas version.
When you change the ideogram, it doesn't clean the previous ideogram loaded:
To change, i'm using the setCharacter method.
That does't happen on the SVG version.
from hanzi-writer.
Related Issues (20)
- Quiz mode: how to set accuracy for quizzes? HOT 1
- The stroke color changes when writing a stroke during a highlight. HOT 6
- hz-writer,在设置宽高为20的情况下,字体是反的 .这是为什么呢? 该怎么解决? 求助ing
- How to get reference to writer? (generating writers programmatically) HOT 2
- Some words are not loaded, but components work fine if loaded separately HOT 2
- 手写功能在火狐浏览器的兼容问题 HOT 1
- 有办法获取写字动画每一笔的轨迹坐标吗
- vue导入之后报错Use of const in strict mode
- Can this library support setting the screen to not flash when i start quiz and set quizStartStrokeNum ? HOT 1
- ”锋“字第五画竖勾无法写对 HOT 2
- 安卓手机wifi网络下,偶尔出现chromium: [ERROR:ssl_client_socket_impl.cc(959)] handshake failed; returned -1, SSL error code 1, net_error -100
- Use KanjiVG to more closely resemble how characters are handwritten
- How to draw certain number of strokes? HOT 2
- Insert audio HOT 2
- `new Path2D()` should not be used, please use `canvas.createPath2D()` HOT 1
- Is it possible to add numbers at the beggining of the strokes? HOT 1
- Is it possible to show only the next stroke? HOT 1
- Is it possible to add some character to hanzi ?
- Get writer index from callback
- How to get stroke trace, for custom brush tracing ?As shown in the figure
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 hanzi-writer.