JSignage:MediaTutorial4

This page is related to JSignage:Tutorials.

Description

Decoration attributes

• Media layers can have frame decoration attributes to alter their shape.
• Notice that the use of the .add() methods with an array argument to add multiple layers at once.

Source code

$('svg').add([
        $.media({
          left: 120,
          top: 30,
          width: 400,
          height: 300,
          frame: { frameColor: '#D4AF37', frameSize: 20 },
          href: 'media/Monet_4_3/mini/2.jpg'
        }),

        $.media({
          left: 760,
          top: 30,
          width: 400,
          height: 300,
          frame: { frameColor: '#D4AF37', frameSize: 20, shape: 'snip', rx: 20 },
          href: 'media/Monet_4_3/mini/3.jpg'
        }),

        $.media({
          left: 120,
          top: 390,
          width: 400,
          height: 300,
          frame: { frameColor: '#D4AF37', frameSize: 20, shape: 'snip', rx: 20, corners: [ 'topRight', 'bottomLeft' ] },
          href: 'media/Monet_4_3/mini/6.jpg'
        }),

        $.media({
          left: 760,
          top: 390,
          width: 400,
          height: 300,
          frame: { frameColor: '#D4AF37', frameSize: 20, shape: 'round', rx: 20, corners: [ 'topLeft', 'bottomRight' ] },
          href: 'media/Monet_4_3/mini/13.jpg'
        })

      ]);

Preview

The preview might not work in Firefox due to lack of support for feImage.