search

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
https://zzz.dog
10.38k stars 394 forks source link

Add scale stroke option #74

Closed charlesr1971 closed 5 years ago

charlesr1971 commented 5 years ago

It would be great if we could have an option called for Group objects:

ScaleStroke: true/false

It is a little tedious having to alter the stroke value of each child object on top of scaling the parent object

desandro commented 5 years ago

Thanks for reporting this issue. Could you post some of your tedious code? I'm trying to understand how to best address this issue.

charlesr1971 commented 5 years ago

@desandro I think you have documented the fact that stroke is not scaled. I was just thinking that it might make it easier, if we could use a 'scaleStroke' option for objects that have a 'stroke' property. This would be similar to Adobe Illustrator, where there is the option to scale stroke, when scaling a shape.

charlesr1971 commented 5 years ago

OK. Here is the code, which consists of a group of objects with different strokes that make up a single entity, which I want to scale, so that all the child objects, scale relative to one another. I have included my current scaling solution:

var zdogCanvas = document.getElementById('zdog-canvas');

var ctx = zdogCanvas.getContext('2d');
zdogCanvas.setAttribute('width',window.innerWidth);

var illo = new Zdog.Illustration({
  element: '.zdog-canvas',
});

var logoGroup = new Zdog.Group({
  addTo: illo,
  translate: { x: -200, y: -160, z: 0},
  updateSort: true,
});

var ellipse = new Zdog.Ellipse({
  addTo: logoGroup,
  diameter: 250,
  stroke: 40,
  color: '#7AABBC',
  fill: true,
  translate: { x: 0, y: 0, z: 0 },
});

var balls = [];

var ballGroup = new Zdog.Group({
  addTo: logoGroup,
  translate: { x: 0, y: 0, z: 0 },
});

var ball1 = new Zdog.Shape({
  addTo: ballGroup,
  stroke: 30,
  color: '#FFF',
  translate: { x: -55, y: -88, z: 50 },
  visible: true,
});

balls.push({obj: ball1, stroke: 30, z: 50});

var ball2 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: 82, y: -37, z: 50 },
  stroke: 28.5,
  color: '#FFF',
});

balls.push({obj: ball2, stroke: 28.5, z: 50});

var ball3 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: 25, y: -120, z: 50 },
  stroke: 19.5,
  color: '#FFF',
});

balls.push({obj: ball3, stroke: 19.5, z: 50});

var ball4 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: -90, y: -12, z: 50 },
  stroke: 19.5,
  color: '#FFF',
});

balls.push({obj: ball4, stroke: 19.5, z: 50});

var personGroup = new Zdog.Group({
  addTo: logoGroup,
  scale: 0.7,
  translate: { x: -88, y: -80, z: 35 },
});

var personBody = new Zdog.Shape({
  addTo: personGroup,
  path: makeZDogBezier([{"x":119.21,"y":281.69},{"x":119.21,"y":281.54},{"x":118.98,"y":274.64},{"x":118.94,"y":271.62},{"x":118.89,"y":268.61},{"x":118.87,"y":265.01},{"x":118.91,"y":260.98},{"x":118.94,"y":256.96},{"x":119.03,"y":252.49},{"x":119.21,"y":247.73},{"x":119.25,"y":246.43},{"x":119.49,"y":244.98},{"x":119.86,"y":243.45},{"x":120.24,"y":241.92},{"x":120.75,"y":240.3},{"x":121.38,"y":238.65},{"x":122,"y":237},{"x":125.18,"y":230.44},{"x":126.07,"y":228.93},{"x":122.89,"y":92.54},{"x":123.12,"y":92.54},{"x":123,"y":70.28},{"x":126.6,"y":70.28},{"x":130.03,"y":69.41},{"x":133.15,"y":67.82},{"x":136.27,"y":66.24},{"x":139.08,"y":63.94},{"x":141.45,"y":61.1},{"x":143.82,"y":58.27},{"x":145.73,"y":54.89},{"x":147.05,"y":51.15},{"x":148.37,"y":47.4},{"x":149.11,"y":43.29},{"x":149.11,"y":38.97},{"x":149.11,"y":34.66},{"x":148.38,"y":30.54},{"x":147.05,"y":26.8},{"x":145.73,"y":23.05},{"x":143.82,"y":19.68},{"x":141.45,"y":16.84},{"x":139.09,"y":14.01},{"x":136.27,"y":11.71},{"x":133.15,"y":10.12},{"x":130.03,"y":8.54},{"x":126.6,"y":7.66},{"x":123,"y":7.66},{"x":119.4,"y":7.66},{"x":115.97,"y":8.54},{"x":112.85,"y":10.12},{"x":109.73,"y":11.71},{"x":106.91,"y":14.01},{"x":104.55,"y":16.84},{"x":102.18,"y":19.68},{"x":100.27,"y":23.05},{"x":98.95,"y":26.8},{"x":97.62,"y":30.54},{"x":96.89,"y":34.66},{"x":96.89,"y":38.97},{"x":96.89,"y":43.29},{"x":97.62,"y":47.4},{"x":98.95,"y":51.15},{"x":100.27,"y":54.89},{"x":102.18,"y":58.27},{"x":104.55,"y":61.1},{"x":106.91,"y":63.94},{"x":109.73,"y":66.23},{"x":112.85,"y":67.82},{"x":115.97,"y":69.41},{"x":119.4,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":84.65},{"x":123,"y":84.65},{"x":123,"y":84.65},{"x":123,"y":99.01},{"x":123,"y":99.01},{"x":123,"y":99.01},{"x":123,"y":113.37},{"x":123,"y":113.37},{"x":123,"y":113.37},{"x":123,"y":127.73},{"x":123,"y":127.73},{"x":123,"y":127.73},{"x":123,"y":142.09},{"x":123,"y":142.09},{"x":123,"y":142.09},{"x":123,"y":156.45},{"x":123,"y":156.45},{"x":123,"y":156.45},{"x":123,"y":170.81},{"x":123,"y":170.81},{"x":123,"y":170.81},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123.22,"y":191.98},{"x":123.17,"y":194.53},{"x":123.13,"y":197.07},{"x":122.99,"y":199.82},{"x":122.68,"y":202.34},{"x":122.37,"y":204.86},{"x":121.88,"y":207.16},{"x":121.15,"y":208.8},{"x":120.5,"y":210.25},{"x":119.78,"y":211.63},{"x":119.05,"y":212.88},{"x":118.33,"y":214.12},{"x":114.73,"y":219.17},{"x":114.73,"y":219.17},{"x":114.73,"y":219.17},{"x":114.65,"y":219.23},{"x":114.65,"y":219.23},{"x":114.65,"y":219.23},{"x":106.02,"y":226.24},{"x":106.02,"y":226.24},{"x":102.07,"y":229.48},{"x":97.88,"y":232.41},{"x":93.56,"y":234.97},{"x":89.25,"y":237.52},{"x":84.81,"y":239.71},{"x":80.33,"y":241.49},{"x":75.86,"y":243.28},{"x":71.36,"y":244.65},{"x":66.92,"y":245.58},{"x":62.49,"y":246.52},{"x":58.12,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.58,"y":247},{"x":50.13,"y":246.87},{"x":49.79,"y":246.85},{"x":45.22,"y":246.5},{"x":41.27,"y":245.44},{"x":37.93,"y":243.86},{"x":34.59,"y":242.28},{"x":31.84,"y":240.19},{"x":29.67,"y":237.79},{"x":27.5,"y":235.38},{"x":25.9,"y":232.66},{"x":24.85,"y":229.84},{"x":23.8,"y":227.01},{"x":23.29,"y":224.07},{"x":23.31,"y":221.23},{"x":23.33,"y":218.17},{"x":23.94,"y":215.06},{"x":25.18,"y":212.09},{"x":26.43,"y":209.13},{"x":28.3,"y":206.32},{"x":30.84,"y":203.84},{"x":33.37,"y":201.37},{"x":36.57,"y":199.24},{"x":40.46,"y":197.64},{"x":44.36,"y":196.04},{"x":48.95,"y":194.97},{"x":54.27,"y":194.63},{"x":54.5,"y":194.62},{"x":56.73,"y":194.55},{"x":56.96,"y":194.55},{"x":61.05,"y":194.55},{"x":65.14,"y":195.13},{"x":69.23,"y":196.16},{"x":73.31,"y":197.18},{"x":77.38,"y":198.65},{"x":81.42,"y":200.41},{"x":85.46,"y":202.17},{"x":89.47,"y":204.23},{"x":93.43,"y":206.45},{"x":97.4,"y":208.67},{"x":101.31,"y":211.04},{"x":105.17,"y":213.43},{"x":105.17,"y":213.43},{"x":114.55,"y":219.24},{"x":114.55,"y":219.24},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":136.29,"y":233.14},{"x":136.29,"y":233.14},{"x":140.75,"y":235.54},{"x":145.04,"y":237.61},{"x":149.19,"y":239.38},{"x":153.35,"y":241.15},{"x":157.38,"y":242.6},{"x":161.31,"y":243.75},{"x":165.24,"y":244.91},{"x":169.07,"y":245.77},{"x":172.84,"y":246.34},{"x":176.61,"y":246.91},{"x":180.32,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.44,"y":247.19},{"x":188.76,"y":247.03},{"x":189.19,"y":247},{"x":195.85,"y":246.52},{"x":201.41,"y":245.39},{"x":205.99,"y":243.81},{"x":210.58,"y":242.22},{"x":214.18,"y":240.18},{"x":216.95,"y":237.86},{"x":219.71,"y":235.53},{"x":221.63,"y":232.94},{"x":222.82,"y":230.24},{"x":224.03,"y":227.55},{"x":224.5,"y":224.77},{"x":224.39,"y":222.07},{"x":224.25,"y":218.49},{"x":223.17,"y":215.08},{"x":221.33,"y":211.98},{"x":219.49,"y":208.88},{"x":216.91,"y":206.08},{"x":213.76,"y":203.73},{"x":210.61,"y":201.38},{"x":206.89,"y":199.47},{"x":202.81,"y":198.16},{"x":198.72,"y":196.84},{"x":194.26,"y":196.12},{"x":189.61,"y":196.12},{"x":189.61,"y":196.12},{"x":189.5,"y":196.12},{"x":189.5,"y":196.12},{"x":189.5,"y":196.12},{"x":189.38,"y":196.12},{"x":189.38,"y":196.12},{"x":189.38,"y":196.12},{"x":189.27,"y":196.12},{"x":189.27,"y":196.12},{"x":189.27,"y":196.12},{"x":189.16,"y":196.12},{"x":189.16,"y":196.12},{"x":182.19,"y":196.18},{"x":175.73,"y":197.3},{"x":169.85,"y":199.04},{"x":163.97,"y":200.78},{"x":158.67,"y":203.16},{"x":154.02,"y":205.75},{"x":149.37,"y":208.35},{"x":145.36,"y":211.16},{"x":142.07,"y":213.78},{"x":138.78,"y":216.4},{"x":136.2,"y":218.83},{"x":134.41,"y":220.65},{"x":134.41,"y":220.65},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":120.78,"y":224.07},{"x":120.78,"y":224.07},{"x":120.78,"y":224.07},{"x":114.65,"y":219.48},{"x":114.65,"y":219.48}]),
  closed: false,
  stroke: 10,
  color: 'hsla(0, 0%, 100%, 1)',
});

var personArms = new Zdog.Shape({
  addTo: personGroup,
  path: makeZDogBezier([{"x":9.41,"y":143.32},{"x":9.68,"y":144.34},{"x":10.26,"y":147.03},{"x":11.38,"y":150.47},{"x":12.5,"y":153.91},{"x":14.16,"y":158.08},{"x":16.57,"y":162.06},{"x":18.99,"y":166.04},{"x":22.16,"y":169.83},{"x":26.31,"y":172.49},{"x":30.47,"y":175.15},{"x":35.6,"y":176.69},{"x":41.94,"y":176.17},{"x":45.91,"y":175.85},{"x":49.24,"y":174.41},{"x":52,"y":172.09},{"x":54.76,"y":169.78},{"x":56.95,"y":166.57},{"x":58.65,"y":162.69},{"x":60.34,"y":158.82},{"x":61.54,"y":154.27},{"x":62.32,"y":149.28},{"x":63.1,"y":144.29},{"x":63.45,"y":138.84},{"x":63.45,"y":133.16},{"x":63.45,"y":132.81},{"x":63.84,"y":122.17},{"x":64.8,"y":117.59},{"x":65.76,"y":113},{"x":67.24,"y":107.97},{"x":69.32,"y":103.21},{"x":71.41,"y":98.45},{"x":74.09,"y":93.95},{"x":77.46,"y":90.44},{"x":80.83,"y":86.92},{"x":84.89,"y":84.38},{"x":89.71,"y":83.54},{"x":90.39,"y":83.42},{"x":93.09,"y":83.11},{"x":93.77,"y":83.08},{"x":94.44,"y":83.05},{"x":95.12,"y":83.04},{"x":95.79,"y":83.05},{"x":96.46,"y":83.06},{"x":97.13,"y":83.1},{"x":97.8,"y":83.15},{"x":100.11,"y":83.35},{"x":102.19,"y":83.71},{"x":104.07,"y":84.18},{"x":105.95,"y":84.66},{"x":107.62,"y":85.24},{"x":109.09,"y":85.88},{"x":110.57,"y":86.52},{"x":111.86,"y":87.21},{"x":112.97,"y":87.91},{"x":114.09,"y":88.6},{"x":115.03,"y":89.3},{"x":115.81,"y":89.93},{"x":116.71,"y":90.66},{"x":117.6,"y":91.19},{"x":118.43,"y":91.57},{"x":118.95,"y":91.8},{"x":120.56,"y":92.13},{"x":121.7,"y":92.34},{"x":121.7,"y":92.33},{"x":122.38,"y":92.46},{"x":122.89,"y":92.54},{"x":122.89,"y":92.54},{"x":123.12,"y":92.54},{"x":123.12,"y":92.54},{"x":123.4,"y":92.5},{"x":123.82,"y":92.42},{"x":123.82,"y":92.42},{"x":124.92,"y":92.23},{"x":126.98,"y":91.84},{"x":127.58,"y":91.56},{"x":128.41,"y":91.18},{"x":129.3,"y":90.65},{"x":130.2,"y":89.93},{"x":130.98,"y":89.29},{"x":131.92,"y":88.6},{"x":133.04,"y":87.91},{"x":134.15,"y":87.21},{"x":135.44,"y":86.52},{"x":136.92,"y":85.88},{"x":138.39,"y":85.24},{"x":140.06,"y":84.65},{"x":141.94,"y":84.18},{"x":143.82,"y":83.7},{"x":145.9,"y":83.34},{"x":148.21,"y":83.15},{"x":148.88,"y":83.09},{"x":149.55,"y":83.06},{"x":150.22,"y":83.04},{"x":150.9,"y":83.03},{"x":151.57,"y":83.04},{"x":152.24,"y":83.08},{"x":152.92,"y":83.11},{"x":155.62,"y":83.41},{"x":156.3,"y":83.53},{"x":161.12,"y":84.38},{"x":165.18,"y":86.92},{"x":168.55,"y":90.43},{"x":171.92,"y":93.95},{"x":174.6,"y":98.44},{"x":176.69,"y":103.21},{"x":178.77,"y":107.97},{"x":180.25,"y":113},{"x":181.21,"y":117.59},{"x":182.17,"y":122.17},{"x":182.56,"y":132.8},{"x":182.56,"y":133.16},{"x":182.56,"y":138.83},{"x":182.91,"y":144.28},{"x":183.69,"y":149.28},{"x":184.46,"y":154.27},{"x":185.67,"y":158.81},{"x":187.36,"y":162.69},{"x":189.06,"y":166.57},{"x":191.25,"y":169.77},{"x":194.01,"y":172.09},{"x":196.77,"y":174.41},{"x":200.1,"y":175.84},{"x":204.07,"y":176.17},{"x":210.41,"y":176.68},{"x":215.55,"y":175.15},{"x":219.7,"y":172.49},{"x":223.85,"y":169.82},{"x":227.03,"y":166.04},{"x":229.44,"y":162.05},{"x":231.85,"y":158.07},{"x":233.51,"y":153.9},{"x":234.63,"y":150.46},{"x":235.75,"y":147.03},{"x":236.33,"y":144.33},{"x":236.6,"y":143.31}]),
  closed: false,
  stroke: 10,
  color: 'hsla(0, 0%, 100%, 1)',
});

function scaleLogo(n){
  var n = arguments[0] != null ? n: 0;
  logoGroup.scale = n;
  ellipse.stroke *= n;
  personBody.stroke *= n;
  personArms.stroke *= n;
  for (var i = 0; i < balls.length; i++) {
    var ball = balls[i]['obj'];
    ball.stroke *= n;
  }
}

scaleLogo(0.5);

// update & render
illo.updateRenderGraph();
charlesr1971 commented 5 years ago

And this is what I would like to do, instead:

var zdogCanvas = document.getElementById('zdog-canvas');

var ctx = zdogCanvas.getContext('2d');
zdogCanvas.setAttribute('width',window.innerWidth);

var illo = new Zdog.Illustration({
  element: '.zdog-canvas',
});

var logoGroup = new Zdog.Group({
  addTo: illo,
  translate: { x: -200, y: -160, z: 0},
  updateSort: true,
});

var ellipse = new Zdog.Ellipse({
  addTo: logoGroup,
  diameter: 250,
  stroke: 40,
  color: '#7AABBC',
  fill: true,
  translate: { x: 0, y: 0, z: 0 },
  scaleStroke: true,
});

var balls = [];

var ballGroup = new Zdog.Group({
  addTo: logoGroup,
  translate: { x: 0, y: 0, z: 0 },
});

var ball1 = new Zdog.Shape({
  addTo: ballGroup,
  stroke: 30,
  color: '#FFF',
  translate: { x: -55, y: -88, z: 50 },
  visible: true,
  scaleStroke: true,
});

balls.push({obj: ball1, stroke: 30, z: 50});

var ball2 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: 82, y: -37, z: 50 },
  stroke: 28.5,
  color: '#FFF',
  scaleStroke: true,
});

balls.push({obj: ball2, stroke: 28.5, z: 50});

var ball3 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: 25, y: -120, z: 50 },
  stroke: 19.5,
  color: '#FFF',
  scaleStroke: true,
});

balls.push({obj: ball3, stroke: 19.5, z: 50});

var ball4 = ball1.copyGraph({
  addTo: ballGroup,
  translate: { x: -90, y: -12, z: 50 },
  stroke: 19.5,
  color: '#FFF',
  scaleStroke: true,
});

balls.push({obj: ball4, stroke: 19.5, z: 50});

var personGroup = new Zdog.Group({
  addTo: logoGroup,
  scale: 0.7,
  translate: { x: -88, y: -80, z: 35 },
});

var personBody = new Zdog.Shape({
  addTo: personGroup,
  path: makeZDogBezier([{"x":119.21,"y":281.69},{"x":119.21,"y":281.54},{"x":118.98,"y":274.64},{"x":118.94,"y":271.62},{"x":118.89,"y":268.61},{"x":118.87,"y":265.01},{"x":118.91,"y":260.98},{"x":118.94,"y":256.96},{"x":119.03,"y":252.49},{"x":119.21,"y":247.73},{"x":119.25,"y":246.43},{"x":119.49,"y":244.98},{"x":119.86,"y":243.45},{"x":120.24,"y":241.92},{"x":120.75,"y":240.3},{"x":121.38,"y":238.65},{"x":122,"y":237},{"x":125.18,"y":230.44},{"x":126.07,"y":228.93},{"x":122.89,"y":92.54},{"x":123.12,"y":92.54},{"x":123,"y":70.28},{"x":126.6,"y":70.28},{"x":130.03,"y":69.41},{"x":133.15,"y":67.82},{"x":136.27,"y":66.24},{"x":139.08,"y":63.94},{"x":141.45,"y":61.1},{"x":143.82,"y":58.27},{"x":145.73,"y":54.89},{"x":147.05,"y":51.15},{"x":148.37,"y":47.4},{"x":149.11,"y":43.29},{"x":149.11,"y":38.97},{"x":149.11,"y":34.66},{"x":148.38,"y":30.54},{"x":147.05,"y":26.8},{"x":145.73,"y":23.05},{"x":143.82,"y":19.68},{"x":141.45,"y":16.84},{"x":139.09,"y":14.01},{"x":136.27,"y":11.71},{"x":133.15,"y":10.12},{"x":130.03,"y":8.54},{"x":126.6,"y":7.66},{"x":123,"y":7.66},{"x":119.4,"y":7.66},{"x":115.97,"y":8.54},{"x":112.85,"y":10.12},{"x":109.73,"y":11.71},{"x":106.91,"y":14.01},{"x":104.55,"y":16.84},{"x":102.18,"y":19.68},{"x":100.27,"y":23.05},{"x":98.95,"y":26.8},{"x":97.62,"y":30.54},{"x":96.89,"y":34.66},{"x":96.89,"y":38.97},{"x":96.89,"y":43.29},{"x":97.62,"y":47.4},{"x":98.95,"y":51.15},{"x":100.27,"y":54.89},{"x":102.18,"y":58.27},{"x":104.55,"y":61.1},{"x":106.91,"y":63.94},{"x":109.73,"y":66.23},{"x":112.85,"y":67.82},{"x":115.97,"y":69.41},{"x":119.4,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":70.28},{"x":123,"y":84.65},{"x":123,"y":84.65},{"x":123,"y":84.65},{"x":123,"y":99.01},{"x":123,"y":99.01},{"x":123,"y":99.01},{"x":123,"y":113.37},{"x":123,"y":113.37},{"x":123,"y":113.37},{"x":123,"y":127.73},{"x":123,"y":127.73},{"x":123,"y":127.73},{"x":123,"y":142.09},{"x":123,"y":142.09},{"x":123,"y":142.09},{"x":123,"y":156.45},{"x":123,"y":156.45},{"x":123,"y":156.45},{"x":123,"y":170.81},{"x":123,"y":170.81},{"x":123,"y":170.81},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123,"y":185.17},{"x":123.22,"y":191.98},{"x":123.17,"y":194.53},{"x":123.13,"y":197.07},{"x":122.99,"y":199.82},{"x":122.68,"y":202.34},{"x":122.37,"y":204.86},{"x":121.88,"y":207.16},{"x":121.15,"y":208.8},{"x":120.5,"y":210.25},{"x":119.78,"y":211.63},{"x":119.05,"y":212.88},{"x":118.33,"y":214.12},{"x":114.73,"y":219.17},{"x":114.73,"y":219.17},{"x":114.73,"y":219.17},{"x":114.65,"y":219.23},{"x":114.65,"y":219.23},{"x":114.65,"y":219.23},{"x":106.02,"y":226.24},{"x":106.02,"y":226.24},{"x":102.07,"y":229.48},{"x":97.88,"y":232.41},{"x":93.56,"y":234.97},{"x":89.25,"y":237.52},{"x":84.81,"y":239.71},{"x":80.33,"y":241.49},{"x":75.86,"y":243.28},{"x":71.36,"y":244.65},{"x":66.92,"y":245.58},{"x":62.49,"y":246.52},{"x":58.12,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.93,"y":247},{"x":53.58,"y":247},{"x":50.13,"y":246.87},{"x":49.79,"y":246.85},{"x":45.22,"y":246.5},{"x":41.27,"y":245.44},{"x":37.93,"y":243.86},{"x":34.59,"y":242.28},{"x":31.84,"y":240.19},{"x":29.67,"y":237.79},{"x":27.5,"y":235.38},{"x":25.9,"y":232.66},{"x":24.85,"y":229.84},{"x":23.8,"y":227.01},{"x":23.29,"y":224.07},{"x":23.31,"y":221.23},{"x":23.33,"y":218.17},{"x":23.94,"y":215.06},{"x":25.18,"y":212.09},{"x":26.43,"y":209.13},{"x":28.3,"y":206.32},{"x":30.84,"y":203.84},{"x":33.37,"y":201.37},{"x":36.57,"y":199.24},{"x":40.46,"y":197.64},{"x":44.36,"y":196.04},{"x":48.95,"y":194.97},{"x":54.27,"y":194.63},{"x":54.5,"y":194.62},{"x":56.73,"y":194.55},{"x":56.96,"y":194.55},{"x":61.05,"y":194.55},{"x":65.14,"y":195.13},{"x":69.23,"y":196.16},{"x":73.31,"y":197.18},{"x":77.38,"y":198.65},{"x":81.42,"y":200.41},{"x":85.46,"y":202.17},{"x":89.47,"y":204.23},{"x":93.43,"y":206.45},{"x":97.4,"y":208.67},{"x":101.31,"y":211.04},{"x":105.17,"y":213.43},{"x":105.17,"y":213.43},{"x":114.55,"y":219.24},{"x":114.55,"y":219.24},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":136.29,"y":233.14},{"x":136.29,"y":233.14},{"x":140.75,"y":235.54},{"x":145.04,"y":237.61},{"x":149.19,"y":239.38},{"x":153.35,"y":241.15},{"x":157.38,"y":242.6},{"x":161.31,"y":243.75},{"x":165.24,"y":244.91},{"x":169.07,"y":245.77},{"x":172.84,"y":246.34},{"x":176.61,"y":246.91},{"x":180.32,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.01,"y":247.19},{"x":184.44,"y":247.19},{"x":188.76,"y":247.03},{"x":189.19,"y":247},{"x":195.85,"y":246.52},{"x":201.41,"y":245.39},{"x":205.99,"y":243.81},{"x":210.58,"y":242.22},{"x":214.18,"y":240.18},{"x":216.95,"y":237.86},{"x":219.71,"y":235.53},{"x":221.63,"y":232.94},{"x":222.82,"y":230.24},{"x":224.03,"y":227.55},{"x":224.5,"y":224.77},{"x":224.39,"y":222.07},{"x":224.25,"y":218.49},{"x":223.17,"y":215.08},{"x":221.33,"y":211.98},{"x":219.49,"y":208.88},{"x":216.91,"y":206.08},{"x":213.76,"y":203.73},{"x":210.61,"y":201.38},{"x":206.89,"y":199.47},{"x":202.81,"y":198.16},{"x":198.72,"y":196.84},{"x":194.26,"y":196.12},{"x":189.61,"y":196.12},{"x":189.61,"y":196.12},{"x":189.5,"y":196.12},{"x":189.5,"y":196.12},{"x":189.5,"y":196.12},{"x":189.38,"y":196.12},{"x":189.38,"y":196.12},{"x":189.38,"y":196.12},{"x":189.27,"y":196.12},{"x":189.27,"y":196.12},{"x":189.27,"y":196.12},{"x":189.16,"y":196.12},{"x":189.16,"y":196.12},{"x":182.19,"y":196.18},{"x":175.73,"y":197.3},{"x":169.85,"y":199.04},{"x":163.97,"y":200.78},{"x":158.67,"y":203.16},{"x":154.02,"y":205.75},{"x":149.37,"y":208.35},{"x":145.36,"y":211.16},{"x":142.07,"y":213.78},{"x":138.78,"y":216.4},{"x":136.2,"y":218.83},{"x":134.41,"y":220.65},{"x":134.41,"y":220.65},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":127.02,"y":228.15},{"x":120.78,"y":224.07},{"x":120.78,"y":224.07},{"x":120.78,"y":224.07},{"x":114.65,"y":219.48},{"x":114.65,"y":219.48}]),
  closed: false,
  stroke: 10,
  color: 'hsla(0, 0%, 100%, 1)',
  scaleStroke: true,
});

var personArms = new Zdog.Shape({
  addTo: personGroup,
  path: makeZDogBezier([{"x":9.41,"y":143.32},{"x":9.68,"y":144.34},{"x":10.26,"y":147.03},{"x":11.38,"y":150.47},{"x":12.5,"y":153.91},{"x":14.16,"y":158.08},{"x":16.57,"y":162.06},{"x":18.99,"y":166.04},{"x":22.16,"y":169.83},{"x":26.31,"y":172.49},{"x":30.47,"y":175.15},{"x":35.6,"y":176.69},{"x":41.94,"y":176.17},{"x":45.91,"y":175.85},{"x":49.24,"y":174.41},{"x":52,"y":172.09},{"x":54.76,"y":169.78},{"x":56.95,"y":166.57},{"x":58.65,"y":162.69},{"x":60.34,"y":158.82},{"x":61.54,"y":154.27},{"x":62.32,"y":149.28},{"x":63.1,"y":144.29},{"x":63.45,"y":138.84},{"x":63.45,"y":133.16},{"x":63.45,"y":132.81},{"x":63.84,"y":122.17},{"x":64.8,"y":117.59},{"x":65.76,"y":113},{"x":67.24,"y":107.97},{"x":69.32,"y":103.21},{"x":71.41,"y":98.45},{"x":74.09,"y":93.95},{"x":77.46,"y":90.44},{"x":80.83,"y":86.92},{"x":84.89,"y":84.38},{"x":89.71,"y":83.54},{"x":90.39,"y":83.42},{"x":93.09,"y":83.11},{"x":93.77,"y":83.08},{"x":94.44,"y":83.05},{"x":95.12,"y":83.04},{"x":95.79,"y":83.05},{"x":96.46,"y":83.06},{"x":97.13,"y":83.1},{"x":97.8,"y":83.15},{"x":100.11,"y":83.35},{"x":102.19,"y":83.71},{"x":104.07,"y":84.18},{"x":105.95,"y":84.66},{"x":107.62,"y":85.24},{"x":109.09,"y":85.88},{"x":110.57,"y":86.52},{"x":111.86,"y":87.21},{"x":112.97,"y":87.91},{"x":114.09,"y":88.6},{"x":115.03,"y":89.3},{"x":115.81,"y":89.93},{"x":116.71,"y":90.66},{"x":117.6,"y":91.19},{"x":118.43,"y":91.57},{"x":118.95,"y":91.8},{"x":120.56,"y":92.13},{"x":121.7,"y":92.34},{"x":121.7,"y":92.33},{"x":122.38,"y":92.46},{"x":122.89,"y":92.54},{"x":122.89,"y":92.54},{"x":123.12,"y":92.54},{"x":123.12,"y":92.54},{"x":123.4,"y":92.5},{"x":123.82,"y":92.42},{"x":123.82,"y":92.42},{"x":124.92,"y":92.23},{"x":126.98,"y":91.84},{"x":127.58,"y":91.56},{"x":128.41,"y":91.18},{"x":129.3,"y":90.65},{"x":130.2,"y":89.93},{"x":130.98,"y":89.29},{"x":131.92,"y":88.6},{"x":133.04,"y":87.91},{"x":134.15,"y":87.21},{"x":135.44,"y":86.52},{"x":136.92,"y":85.88},{"x":138.39,"y":85.24},{"x":140.06,"y":84.65},{"x":141.94,"y":84.18},{"x":143.82,"y":83.7},{"x":145.9,"y":83.34},{"x":148.21,"y":83.15},{"x":148.88,"y":83.09},{"x":149.55,"y":83.06},{"x":150.22,"y":83.04},{"x":150.9,"y":83.03},{"x":151.57,"y":83.04},{"x":152.24,"y":83.08},{"x":152.92,"y":83.11},{"x":155.62,"y":83.41},{"x":156.3,"y":83.53},{"x":161.12,"y":84.38},{"x":165.18,"y":86.92},{"x":168.55,"y":90.43},{"x":171.92,"y":93.95},{"x":174.6,"y":98.44},{"x":176.69,"y":103.21},{"x":178.77,"y":107.97},{"x":180.25,"y":113},{"x":181.21,"y":117.59},{"x":182.17,"y":122.17},{"x":182.56,"y":132.8},{"x":182.56,"y":133.16},{"x":182.56,"y":138.83},{"x":182.91,"y":144.28},{"x":183.69,"y":149.28},{"x":184.46,"y":154.27},{"x":185.67,"y":158.81},{"x":187.36,"y":162.69},{"x":189.06,"y":166.57},{"x":191.25,"y":169.77},{"x":194.01,"y":172.09},{"x":196.77,"y":174.41},{"x":200.1,"y":175.84},{"x":204.07,"y":176.17},{"x":210.41,"y":176.68},{"x":215.55,"y":175.15},{"x":219.7,"y":172.49},{"x":223.85,"y":169.82},{"x":227.03,"y":166.04},{"x":229.44,"y":162.05},{"x":231.85,"y":158.07},{"x":233.51,"y":153.9},{"x":234.63,"y":150.46},{"x":235.75,"y":147.03},{"x":236.33,"y":144.33},{"x":236.6,"y":143.31}]),
  closed: false,
  stroke: 10,
  color: 'hsla(0, 0%, 100%, 1)',
  scaleStroke: true,
});

logoGroup.scale = 0.5;

// update & render
illo.updateRenderGraph();
desandro commented 5 years ago

I think you can resolve this request by using zoom. This will scale up everything in the illustration — so its a bit more broad usage than just on a Group. Outside of that, the problem with applying scale to stroke is that scale doesn't have to be a uniform value. It could be on one axis like { x: 2 }. But, my feel is that this feature is a niche that's already covered by zoom or copy. I'll pass on this one.