Coder Social home page Coder Social logo

snap.svg.freetransform's Introduction

Snap.svg.FreeTransform

Free transform tool for Snap.svg elements and sets with many options. Supports snap-to-grid dragging, scaling and rotating with a specified interval and range.

Licensed under the MIT license.

snap.svg.freetransform's People

Contributors

danny-toi avatar

Stargazers

老贾 avatar Wasim Alhajebi avatar Hassan Ben Jobrane avatar Zevan Rosser avatar 水無月 MINAZUKI avatar Marcos Scaianschi avatar Roman Chernyshov avatar Petr Popov avatar Ari Seo avatar  avatar Ganesh Umashankar avatar  avatar timelyportfolio avatar Hikaru Kawayoke avatar Emanuele Sabetta avatar FullStackWeb  avatar  avatar Lim Howe avatar

Watchers

timelyportfolio avatar James Cloos avatar  avatar

snap.svg.freetransform's Issues

freeTransform handles ignore subject transform

freeTransform render handles on attached object without translate/rotate/scale transformation. To reproduce the issue, add transform string to object in index.html:

var paper = Snap('#main-container'), object = paper .rect(50, 50, 200, 200) .attr({ cursor: 'move', fill: '#1e609d', transform: 'R45S2,1.5T400,400' });

You can see the handles is offsetting from the object.

Hiding and showing handles

It's not an issue but more like a question

I would like to know if there is a way to show the handle only on clicking the object and hiding it again on clicking outside the object ?

Thank you in advance

using viewBox causes calculations to be off

While using a viewBox="width height" to scale my content, problems are created for the FreeTransform class where the outline rects are larger than the content. IT seems that some of the components scale correctly, but some do not.

I think you'll need to calculate a multiplier based on the original SVG size vs the scaled Size and use this in the calculations for rendering the components.

Thanks!

Snap to grid?

HI, can you show how to set up the free transform tool so it snaps to the grid.

I currently have it setup like this
var centerWidth = window.innerWidth / 2 ; paper.freeTransform(object,{ draw: ['bbox'], drag: ['self'], keepRatio: ['bboxCorners'], rotate: ['axisX'], scale: ['bboxCorners', 'bboxSides'], distance: '1.2', snap : {drag : centerWidth} }, cb);

this snaps to the horizontal center of the paper. but can show me how can set it up snap to multiple points in the grid.

Freetransform using old path info for the handles.

Hi,
I need to store the final SVG to a database. However when I bring the transformed SVG element and re-attach the SVG transform to it, the handles appear around the old path, not counting the current transformation. I tried to apply updateHandles() with no effect. Do you know any workaround this?

Basically what is going on is that freetransform is wrapping around the original path, missing the transform='matrix()' definition for the element.

Unselect elements

Is there a way to remove the handles, so that the element is unselected and therefore non-transformable? Thanks.

EDIT: figured it out some time ago.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.