Search the Community
Showing results for tags 'crop'.
Found 6 results
-
I’ve talked about this in other threads, but I think it’s worth making a standalone tip for it so here we go. There are three things that will eliminate coordinate surprises and weird transforms with your SVG exports. A background rectangle A background rectangle A background rectangle Yes, it’s that important. Take this simple 600 x 200 SVG. Nothing but a circle, rectangle and a blobby path. Here’s how it looks in Adobe Illustrator. You’ll see that I also have a background layer with a 600 x 200 white rectangle in it. Exporting that SVG produces this result: <svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"> <g id="Background"> <rect width="600" height="200" fill="#fff" /> </g> <g id="Children"> <circle cx="100" cy="100" r="75" fill="#75131a" /> <rect x="225" y="25" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" fill="#0071bc" /> </g> </svg> Exactly as I’d like. A 600 x 200 viewBox and everything is positioned where I expected it. Now, what if I didn’t use the background rectangle? Here’s the export result after removing it: <svg xmlns="http://www.w3.org/2000/svg" width="554.65" height="178" viewBox="0 0 554.65 178"> <circle cx="75" cy="88" r="75" fill="#75131a" /> <rect x="200" y="13" width="150" height="150" fill="#136036" /> <path d="M575,100c21,5-33.58,90-75,90s-104-82-75-90c39.93-11,33.58-88,75-88S534.71,90.41,575,100Z" transform="translate(-25 -12)" fill="#0071bc" /> </svg> You can see the viewBox has now changed to 554.65 x 178 instead of my artboard size of 600 x 200. The circle and the rectangle no longer have the coordinates I expected, and the blobby path has some weird transform applied to it. This is only three simple elements and it’s a bit difficult to animate with precision. Now think about complex SVGs with multiple paths and how this could cause problems with your animations. Bottom line: use a background rectangle the same size as your SVG, export your code and then delete the rectangle if you don’t need it. Hopefully this info helps with your SVG projects. Happy tweening.
-
I cant get crop to work, is it possible to use it with dynamically added images? var myTargets:Array = []; var manager:TransformManager = new TransformManager({targetObjects:myTargets,constrainScale:false,forceSelectionToFront:true,allowDelete:true,autoDeselect:false,handleSize:35});
-
I have a container div that has overflow: auto; and then I use tweenlite to zoom in some of the images. I like that it zooms to the center using the scale feature, but it only let's me scroll down and right. It chops off anything in top or left. I can get everything if I scale then more the top and left negatively, but I don't want to zoom to the top corner. Is there a way to re register the size, or a workaround? Thanks
-
Once again .. thanks for an awesome code, that really helps me out on a day to day basis Right now, I'm working on a project using the crop-functions, and I have a few questions, that I can't seem to find any answers to on the forums, or on Google. First off, when I add a item that use the crop-function, is it somehow possible to have the scaling default to constraining scale? I can't seem to call the constrainScale:Boolean -property, that I usually use in a transform item. - so I guess it's not there ... but if I hold down shift, I can see the functionality is there! Secondly, is there by chance a boolean to toggle the mouse-click that activates the cropping? Since I was planing to make cropping occur only when the user clicks on a button, while the item is selected, and not being able to activate it by double-clicking. Are there any way to do this without changes to the source? p.s. you guys rocks!
-
Hi, I would like to make the crop mask inverted, IE so the selection rectangle is transparent and outside the selection rectangle has a darker mask. Any suggestions on how to do this? Thanks, Dave
-
Hi guys, has anyone else had this problem or know of why it might be happening? Im building a simple recipe app for a client of ours and using loadermax to load the xml and images etc, its going to be on android and iphone. i'm loading my images like this, into a cropped area: queue.append( new ImageLoader(imagePath+imageURL, {name:elementID, estimatedBytes:40000, container:listElementContainer, alpha:1, height:300, width:640, scaleMode:"proportionalOutside", crop:"true"}) ); Then after everythings finished loading im using blitmask and making the page scrollable: pageScroll = new BlitMask(scrollPageTarget, bounds.x, bounds.y, bounds.width, bounds.height, true, true, 0xffffff, false); (using the throwplugin etc) Basically my problem is it all works fine on a pc or mac but when exporting to the phone the loadermax crop appears to work until you finish scrolling and i disable blitmask (to make the links to the recipes clickable again) and it seems to disable all the cropped images and show them in full again, then when scrolling again it enables blitmask and it all looks perfect again then when u stop boom all the images are back full again. Anyone encounters any bugs like this before when using loadermax and blitmask? thanks for any help, not sure what else to post so please ask questions and i'll do my best to answer. chur ed
