Comments (20)
Thanks for the update, I will try and get round to checking through the code, but it may be a short while as I'm away soon for a bit. So I can replicate, are you just resizing the browse by dragging the corners of the browser or whatever ?
Can you make it happen here http://svg.dabbles.info/Snap.svg.FreeTransform/ ? Just wondering if it's a combination of things, so if you have a jsfiddle example or something it would be very useful.
from snap.svg.freetransform.
Just wondering if this may work as a workaround until I get a closer look.
https://jsfiddle.net/nta1s22f/2/
from snap.svg.freetransform.
Hmm yep, I think for the moment, you may have to remove the viewbox from the svg to get it to work. Appreciate that may not fix the problem for you, but I suspect this one is probably quite a tricky problem, and I don't think I will have time just atm to fix
from snap.svg.freetransform.
Not sure, depends on what you mean by an image in this context, and if you mean svg, or an img tag or what. I'd just ask the question (you may get more success on Stackoverflow if it's a more general question).
from snap.svg.freetransform.
Out of interest, I've done some fundamental changes we are now on the development branch into the way some of it works. I'd be interested to know if you are still getting a problem (if so, could you slap it on a jsfiddle).
from snap.svg.freetransform.
The handle's position is not updated after browser resized. I think that is because the svg set percentage width base on browser. So, svg size keeps changing by the browser. This might be not an issue, just a improvement feature.
from snap.svg.freetransform.
Do you mean the papers svg (that you are adding your path/image and the handles to) is 100%/100% width/height ?
from snap.svg.freetransform.
Yes, I think so. SVG default width and height are 100%? I am not sure.
Here are my code and svg file.
<svg id="main-container"></svg>
<script src="snap.svg-min.js"></script>
<script src="snap.svg.free_transform.js"></script>
<style>
# .ftdisc { fill: grey; }
# .fthandle { fill: grey; }
# .ftcentercircle { fill: red; }
# .ftbbox { stroke-width: 10; }
# .ftaxisline { stroke-width: 10; }
</style>
<script type="text/javascript">
var s = Snap('#main-container');
var ft;
Snap.load( "phone1.svg", function( frag ) {
var g = s.g();
g.append(frag);
var allG = s.select('.myG');
ft = s.freeTransform( allG, { snap: { rotate: 1 }, size: 8, draw: 'bbox',keepRatio: true,undrag: false});
window.onresize = function(event) {
console.log('window resized')
ft.updateHandles()
};
} );
</script>
phone1.svg
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g class="myG">
<g>
<path d="M461.913,5.565c-26.811,0-48.766,21.176-50.026,47.681c-52.002,17.83-138.69,52.493-272.757,52.493H116.87
c-22.225,0-41.106,14.556-47.636,34.632C29.97,147.153,0,181.436,0,222.609s29.97,75.455,69.234,82.237
c5.618,17.27,20.377,30.442,38.541,33.79l21.318,126.063c4.09,24.183,24.86,41.736,49.387,41.736
c30.514,0,53.702-27.421,48.692-57.48l-17.664-105.984c93.9,9.151,145.539,29.512,202.379,49.001
c1.26,26.505,23.215,47.681,50.026,47.681c27.618,0,50.087-22.469,50.087-50.087V55.652C512,28.034,489.531,5.565,461.913,5.565z
M66.783,269.834c-19.435-6.89-33.391-25.459-33.391-47.225s13.956-40.336,33.391-47.226V269.834z M178.479,473.043
c-8.175,0-15.098-5.851-16.462-13.912l-20.232-119.64c11.07,0.043,22.237,0.348,33.445,0.923l19.005,114.03
C195.858,464.186,188.359,473.043,178.479,473.043z M197.009,308.373c-19.403-1.504-38.796-2.287-57.878-2.287H116.87
c-9.206,0.001-16.696-7.489-16.696-16.695V155.826c0-9.206,7.49-16.696,16.696-16.696h22.261c19.083,0,38.476-0.784,57.878-2.287
V308.373z M411.826,356.65c-44.604-15.292-93.983-34.459-181.426-44.979V133.546c86.614-10.42,135.465-29.223,181.426-44.98
V356.65z M478.609,389.565c0,9.206-7.49,16.696-16.696,16.696s-16.696-7.49-16.696-16.696c0-4.33,0-329.281,0-333.913
c0-9.206,7.49-16.696,16.696-16.696s16.696,7.49,16.696,16.696V389.565z"/>
</g>
</g>
</svg>
from snap.svg.freetransform.
Well, I just set svg width 500px, the result is the same. I think I found the problem. Here is what I have done to avoid the issue.
- Set fixed svg width to prevent svg from resized by browser.
- Set fixed height to main-canvas to prevent svg from moving by drag browser.
If svg gets resized/moved by browser, the handles won't update the position.
from snap.svg.freetransform.
Alright, I just saw that you've updated comment. I'll make a fiddle example later.
from snap.svg.freetransform.
Try to resize the fiddle window or browser, you will see the issue.
https://jsfiddle.net/nta1s22f/
from snap.svg.freetransform.
Yeah the demo looks nice. But that brings another issue :(
After you unplug and re-create the object, the handles become so small...Is that solvable?
from snap.svg.freetransform.
Sorry, I went on vacation these days. I tested the demo again. Seems to you have fixed it?? Looks perfect :D
from snap.svg.freetransform.
Hah nope, maybe you had removed the viewbox from the svg ?
from snap.svg.freetransform.
nope, the svg comes from another site. I don't have permission to edit it.
from snap.svg.freetransform.
Oh my bad, the problem is still there..If the object get resized by handles before the browser resizing, it happens. Never mind, thanks for taking time for this.
from snap.svg.freetransform.
Just let you know. Event remove the viewpoint, the handle size issue still happends.
from snap.svg.freetransform.
Just wondering, if you want it resizable, what about if you set the main svg with a fixed width/height/viewBox, but out that inside an svg with a responsive set, eg 100% width/height and viewBox.
Like here http://svg.dabbles.info/fttest/index.html
You could even do something like
t.setOpts( { size: } ); on a resize, I've just added an example on the link above to make the handles bigger on a resize.
from snap.svg.freetransform.
Cool, very nice example. Looks perfect. Thanks for the assistance.
May I ask you a little question about image resizing? It's not really related with this subject. Do you know any plugin that can control image resizing with slider (Like Jquery UI slider)? I am trying combine Snap svg FreeTransform with slider bar controller. Thanks again.
from snap.svg.freetransform.
Okay, I see. Yes, I just made an svg resize demo for Stackoverflow. Thank you bro.
from snap.svg.freetransform.
Related Issues (7)
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 snap.svg.freetransform.