transform

How to rotate an image using Flutter AnimationController and Transform?

by

Full example (null safe): Press “go” makes the star icon spin until you press “stop”. import ‘package:flutter/material.dart’; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin … Read more

What is the difference between the fundamental, essential and homography matrices?

by

Without any extra assumption on the world scene geometry, you cannot affirm that there is a projective transformation between the two views. This is only true if the scene is planar. A good reference on that topic is the book Multiple View Geometry in Computer Vision by Hartley and Zisserman. If the world scene is … Read more

How to manipulate translate transforms on a SVG element with javascript in chrome?

by

There are two ways to get/set transform values for SVG elements in Chrome, Firefox, IE, or any standards-fearing SVG user agent: Handling Transforms via Attributes // Getting var xforms = myElement.getAttribute(‘transform’); var parts = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms); var firstX = parts[1], firstY = parts[2]; // Setting myElement.setAttribute(‘transform’,’translate(30,100)’); Pros: Simple to set and understand (same as the … Read more

CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide

by

Frustrating huh? See EDIT4 for the answer to why 2000px is a magic number. There is a couple of things you can try. Add -webkit-transform-style: preserve-3d; to the elements that are flickering. add -webkit-backface-visibility: hidden; to the elements that are flickering. move the animating element outside of the parent the flickering elements are within. EDIT … Read more

How to prevent XXE attack

by

You can use the same approach with DocumentBuilderFactory: DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance(); factory.setFeature(XMLConstants.FEATURE_SECURE_PROCESSING, true); … To make everyone use this automatically, you need to create your own implementation (by extending the one which you’re currenly using; use your debugger to find out). Set the feature in the constructor. Then you can pass the new factory … Read more

How to do transforms on a CALayer?

by

Basics There are a number of different transforms you can do on a layer, but the basic ones are translate (move) scale rotate To do transforms on a CALayer, you set the layer’s transform property to a CATransform3D type. For example, to translate a layer, you would do something like this: myLayer.transform = CATransform3DMakeTranslation(20, 30, … Read more

Dragging & Resizing CSS Transformed Elements

by

You can get the current transformation matrix that is applied to an element by using getComputedStyle(). You can use this to transform the current mouse position to its position in transformed space and see whether the click/drag events are within the element boundary and/or corners. Good resources for this: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/ http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/ BTW, as you’re experiencing, … Read more

Flattening SVG matrix transforms in Inkscape

by

Short answer When typing the transformation matrix params in Inkscape, make sure you have “Edit current matrix” checked, since if you apply a new transformation matrix to an object, you’re actually multiplying this new matrix with the existing transformation matrix of the object, so make sure you edit it instead. Long Answer How to recalculate … Read more