Comments (2)
@Heydon I presume you're asking about scaling the drawing to always fit within the browser viewport. This is pretty easy, just define your dimensions in the SVG viewbox, and the browser will automatically scale your drawing.
For example, this isn't using the perfect freehand JS lib, but my solution is essentially what I've been using over here.
from perfect-freehand.
Heya, this isn't a perfect-freehand
specific issue so I'm moving to discussions.
👉 But here's the fix: just remove the viewBox
property!
Your example with just that line removed.
You never have to provide a viewBox
to an <svg>
element; and in most cases, I would suggest you don't provide one. If you styling an <svg>
element with CSS and leave the viewBox
off, then the browser will solve the coordinate space automatically—solving problems like the one you have here.
If you need to crop, zoom, etc, then I'd suggest transforming a <g>
element rather than using the viewBox
. (I've tried things both ways and the <g>
approach is better.)
from perfect-freehand.
Related Issues (20)
- Colours
- How do I add color to my drawings?
- Auto-write files to G-Drive / iCloud
- [Bug] Backtracking creates dots on end of lines HOT 9
- change color of lines HOT 1
- [Bug] Explicit ESM declaration HOT 4
- [Bug] Backtracking creates dots on end of lines HOT 1
- [Bug] Weird sharp corners when drawing fast with touch HOT 3
- [Bug] Crashing on ios 12 HOT 1
- [documentation] Documentation of "last" parameter default doesn't match code HOT 1
- [feature] Drawing and handwriting recognition HOT 1
- [feature] currentcolor option in color palette HOT 2
- [feature] Shape recognition HOT 1
- [documentation] How to use Flattening?
- [Bug] Save to SVG not work
- [feature] Supporting intermediate control points HOT 1
- [Bug] Sveltekit throws "Syntax Error: Unexpected token 'export'" HOT 3
- [Bug] The Troke drawing doesn't look good in the html canvas HOT 2
- [Bug] "yarn start" fails to start
- [feature] layer / group separation
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 perfect-freehand.