Is there a straightforward to dynamically adjust a trapezoid in Perspective? Normally you only have the two dimensions (width, height) and would like a little more independent control.
You could dynamically modify an SVG.
What type of parameters are you looking to control?
Just looking to control height on ends
Sure.
Obviously you can get much more complex than this, but it should serve as a good enough example to get you started.
Copy the JSON below and paste it into a view to see the how I did it.
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 762,
"width": 1055
}
},
"root": {
"children": [
{
"meta": {
"name": "blank"
},
"position": {
"height": 150,
"width": 600,
"x": 50,
"y": 78
},
"propConfig": {
"props.elements[0].d": {
"binding": {
"config": {
"expression": "max({../Slider.props.value},5)/100 * 40"
},
"transforms": [
{
"expression": "concat(\"M10 40 L190 40 L180 \", {value}, \" L20 \", {value}, \"Z\")",
"type": "expression"
}
],
"type": "expr"
}
}
},
"props": {
"elements": [
{
"fill": {
"paint": "#00000000"
},
"stroke": {
"paint": "#000000"
},
"type": "path"
}
],
"preserveAspectRatio": "xMinYMin",
"viewBox": "0 0 200 50"
},
"type": "ia.shapes.svg"
},
{
"meta": {
"name": "Slider"
},
"position": {
"height": 39,
"width": 365,
"x": 79,
"y": 241
},
"props": {
"labels": {
"interval": 10,
"show": true
}
},
"type": "ia.input.slider"
},
{
"meta": {
"name": "Label"
},
"position": {
"height": 32,
"width": 50,
"x": 507,
"y": 244.5
},
"propConfig": {
"props.text": {
"binding": {
"config": {
"path": "../Slider.props.value"
},
"type": "property"
}
}
},
"type": "ia.display.label"
}
],
"meta": {
"name": "root"
},
"type": "ia.container.coord"
}
}
2 Likes