Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

MorphSVGPlugin.defaultRender

MorphSVGPlugin.defaultRender : Function

Sets the default function that should be called whenever a morphSVG tween updates. This is useful if you're rendering to <canvas>.

Details

Sets the default function that should be called whenever a morphSVG tween updates. This is useful if you’re rendering to <canvas>.

Video explanation

Demo: MorphSVG canvas rendering

Here’s an example of a tween and a render function that’d draw the morphing shape to canvas:

  1. var canvas = document.querySelector("canvas"),
  2. ctx = canvas.getContext("2d"),
  3. vw = canvas.width = window.innerWidth,
  4. vh = canvas.height = window.innerHeight;
  5. ctx.fillStyle = "#ccc";
  6. MorphSVGPlugin.defaultRender = draw;
  7. gsap.to("#hippo", {duration: 2, morphSVG: "#circle"});
  8. function draw(rawPath, target) {
  9. var l, segment, j, i;
  10. ctx.clearRect(0, 0, vw, vh);
  11. ctx.beginPath();
  12. for (j = 0; j < rawPath.length; j++) {
  13. segment = rawPath[j];
  14. l = segment.length;
  15. ctx.moveTo(segment[0], segment[1]);
  16. for (i = 2; i < l; i+=6) {
  17. ctx.bezierCurveTo(segment[i], segment[i+1], segment[i+2], segment[i+3], segment[i+4], segment[i+5]);
  18. }
  19. if (segment.closed) {
  20. ctx.closePath();
  21. }
  22. }
  23. ctx.fill("evenodd");
  24. }

Powered by Froala Editor

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×