Forum Discussion

SamHill's avatar
SamHill
Super Hero
3 months ago

Dynamic border radius experiment

This was just a little experiment to see if I could manipulate the border radius of shapes on the slide numerically using JavaScript, and the answer is yes. Not sure of any use case, but I've always wanted to be able to control the border radius numerically in Storyline as border radius is not maintained when resizing shapes. I'm not sure if this could help as there is no easy way of targeting specific shapes in a slide without knowing their unique ID. It was a bit of fun anyway.

If anybody would like to play or expand on this, go for it. What I've found so far, is it will only support solid or no outlines on shapes. When you start using other styles (dot, dash) an image is used by Storyline to achieve this.

window.updateCornerRadius = function(targets, radius) {
	targets.forEach(function(target){
		const path = document.querySelector(`[data-dv_ref="ref-${target}"] path`);
		if (!path) {
	      console.error(`SVG target ${target} not found.`);
	      return;
	    }
	    // Extract the bounding box of the current path
	    const bbox = path.getBBox();
	    const x = bbox.x;
	    const y = bbox.y;
	    const width = bbox.width;
	    const height = bbox.height;
	    // Ensure radius doesn't exceed half the width or height
	    radius = Math.min(radius, width / 2, height / 2);
	    // Construct a new path data string with the updated corner radius
	    const newPathData = `
	      M ${x + radius},${y}
	      H ${x + width - radius}
	      A ${radius},${radius} 0 0 1 ${x + width},${y + radius}
	      V ${y + height - radius}
	      A ${radius},${radius} 0 0 1 ${x + width - radius},${y + height}
	      H ${x + radius}
	      A ${radius},${radius} 0 0 1 ${x},${y + height - radius}
	      V ${y + radius}
	      A ${radius},${radius} 0 0 1 ${x + radius},${y}
	      Z
	    `;
	    // Update the path's "d" attribute
	    path.setAttribute("d", newPathData);
	});
  }

An example of this being called. I'm using a variable, borderRadius, change trigger.

const borderRadius = getVar("borderRadius");
window.updateCornerRadius(['12','15','18','21'], borderRadius);

 

border radius
JavaScript
storyline
storyline 360
  • Nedim's avatar
    Nedim
    Community Member
    2 months ago

    Hi Sam,

    Thank you for sharing your experimental code. I’m not quite at that level yet, but I can appreciate the effort you've put into it. I’ll see if I can find any use cases for it.

    I’ve also been experimenting with dynamically adding border-radius and came up with something similar. However, instead of relying on data-acc-text, I added a text inside a shape where the first line of text at the top reads "br-50". I then used that text as a class name to target elements containing it. Additionally, I experimented with manipulating SVG and path elements to simplify the code while achieving the desired effect. Since modifying paths can be tricky, I opted to hide the paths and apply the styling directly to the SVG elements instead. Does this approach make sense?

    Example:

    var shapes = document.querySelectorAll('[data-model-id]');  

shapes.forEach(function(shape) {
    var text = shape.querySelector('text');
    var svg = shape.querySelector('svg');
    var path = shape.querySelector('path');
    
    if (text && text.textContent === "br-50") {
        text.classList.add(text.textContent); 
        svg.classList.add(text.textContent);
        path.classList.add('hidden');
        
        svg.style.pointerEvents = 'all';
    }
});

var shapesWithClass = document.getElementsByClassName('.br-50');
console.log(shapesWithClass);

    and CSS

    var sliderValue = getVar('Slider2') + "%";

var style = document.createElement('style');

style.textContent = `
  .br-50 {
    border-radius: ${sliderValue};
    background-color: purple; 
    border: 5px solid black;
    fill: transparent;
  }
`;

document.head.appendChild(style);

     

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    3 months ago

    While I can think of some uses, they may not be particularly practical. Nevertheless, a handy starting point for anyone who wants to learn more about SVG paths.

    I'll add a couple of resources to help anyone interested in understand what you're doing.

    SVG Syntax Guide

    SVG Path Visualizer

Related Content