Generating paths rotated around a specific point

Vk1 · November 23, 2015, 6:22pm

Hi @rodovich @JeffTalbot @paulkaplan and all.

I am writing an app to easel called Puzzle Generator and I am facing a strange problem, so I need your help.

I am using svg directive “transform=rotate(, X_coord, Y_coord)” there, but seems that parameters X_coord and Y_coord parameters are ignored and the svg path is rotated around different point that is causing bad position of my puzzle peaces on easel workspace, but in preview everything looks good (chrome support that). See my screenshots:

The svg looks ok in preview:

The same svg imported in workspace:

Could it be possible to implement these rotate parameters in easel too or I should use some “workaround” and not use this functionality?

Here you can find my app code It is little bit messy as it is my first app in javascript and easel, so be lenient while reading my code, please

github.com

kadli/Easel-Puzzle-Generator/blob/master/puzzle.js

    // Define a properties array that returns array of objects representing
    // the accepted properties for your application
    var properties = [
      {type: 'range', id: "X Count", value: 4, min: 2, max: 20, step: 1},
      {type: 'range', id: "Y Count", value: 4, min: 2, max: 20, step: 1},
      {type: 'range', id: "Space", value: -1, min: -1, max: 100, step: 1}
    ];
    function getPathData(type,xOffset,yOffset,rotation){
        rotation = rotation*90;
        var xPlace;
        var yPlace;
        switch(type){
            case 1:
                xPlace = 11+xOffset;
                yPlace = 814-yOffset+hglob-800;
                return '<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M'+xPlace+','+yPlace+' h 200 v -48.59 c 0 -37.5 13.463 -26.367 13.463 -26.367 c 4.745 3.142 10.422 4.98 16.537 4.98 c 16.569 0 30 -13.433 30 -30.002 c 0 -16.568 -13.431 -30.002 -30 -30.002 c -6.112 0 -11.792 1.839 -16.534 4.98 c 0 0 -13.466 11.133 -13.466 -26.367 v -48.632 h -47.917 c -37.5 0 -26.367 13.466 -26.367 13.466 c 3.14 4.741 4.978 10.422 4.978 16.531 c 0 16.568 -13.43 30.002 -30 30.002 c -16.569 0 -30 -13.434 -30 -30.002 c 0 -6.114 1.839 -11.79 4.979 -16.537 c 0 0 11.133 -13.46 -26.367 -13.46 c -0.236 0 -0.461 0 -0.694 0 h -48.612 v 200 Z" transform="rotate('+rotation+','+(xPlace+100)+','+(yPlace-100)+')"/>';
            case 2:
                xPlace = 241+xOffset-200;
                yPlace = 744.002-yOffset+hglob-800;
                return '<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M'+xPlace+','+yPlace+' c -6.114 0 -11.792 -1.839 -16.537 -4.98 c 0 0 -13.463 -11.133 -13.463 26.367 v 48.611 h 200 v -48.611 c 0 -37.5 -13.463 -26.367 -13.463 -26.367 c -4.743 3.142 -10.422 4.98 -16.537 4.98 c -16.569 0 -30 -13.433 -30 -30.002 s 13.431 -29.997 30 -29.997 c 6.113 0 11.793 1.834 16.535 4.976 c 0 0 13.464 11.133 13.464 -26.367 v -48.612 h -48.611 c -37.5 0 -26.367 -13.46 -26.367 -13.46 c 3.14 -4.745 4.979 -10.423 4.979 -16.537 c 0 -16.568 -13.432 -30.002 -30.001 -30.002 s -30 13.434 -30 30.002 c 0 6.112 1.838 11.792 4.978 16.534 c 0 0 11.133 13.463 -26.367 13.463 h -48.61 v 48.611 c 0 37.5 13.466 26.367 13.466 26.367 c 4.742 -3.142 10.422 -4.976 16.534 -4.976 c 16.569 0 30 13.428 30 29.997 s -13.432 30.003 -30 30.003 Z" transform="rotate('+rotation+','+(xPlace+70)+','+(yPlace-30)+')"/>';

This file has been truncated. show original

PS: And Just one more question: Is it possible to specify the “outline->outside” of generated svg path?

rodovich · November 24, 2015, 1:34am

Hi @Vk1, sorry for the trouble, that’s a bug in the importer & we’ll have it fixed soon.

And Just one more question: Is it possible to specify the “outline->outside” of generated svg path?

We want to make some changes to the Easel API to let apps work more closely with Easel’s internal representation for project data. That would make this possible, but in the meantime, unfortunately, there’s no way to do that.

rodovich · November 24, 2015, 4:24pm

Hi @Vk1, this should be working now. Thanks for reporting the problem!