CODEWITHSUNDEEP
javascriptsvgsnap.svg
Francis Hemsher
Francis Hemsher

Reputation: 3488

Snap.svg: What does Matrix.x(x,y) provide?

Below is an example of using Snap.svg's Matrix.x(x,y) and I'm trying to determine how it is used. After creating the Matrix transforms below(see image), and requesting the Matrix.x(50,50), it returns a value of 315.47+. What is that value?

Thanks

    var SNPsvg = Snap("#mySVG");
     //---square, center(0,0)---
    var rect = SNPsvg.rect(-30,-30,60,60).attr({fill: 'blue' });

    var myMatrix = Snap.matrix();
    myMatrix.translate(200,100)
    myMatrix.scale(2,1.5)
    myMatrix.skew(30,45)
    myMatrix.rotate(30)
    rect.transform(myMatrix)

    var mX1=myMatrix.x(50,50)//--if add translate (50,50) ??---

enter image description here

Upvotes: 0

Views: 528

Answers (2)

Ian
Ian

Reputation: 13842

Its the value of x when transformed by that matrix!

Typically you will use it alongside y,

var TransformedPt = {
  x: Matrix.x(x,y),
  y: Matrix.y(x,y),
}

However, I would first look into Snaps transform strings, as they are often easier. For example..

rect.transform('t200,200r30s2,3')

Would transform the rect, translating 200,200, rotating (around center) 30 degrees, and then scaling x,y 2,3

It's there to help avoid the need for dealing with matrices. See here also.

Upvotes: 1

Dan D.
Dan D.

Reputation: 74655

The documentation states that Matrix.x(x, y):

Returns x coordinate for given point after transformation described by the matrix.

From http://snapsvg.io/docs/#Matrix.x

Upvotes: 0

Related Questions