! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

사용자 도형 그릴때 사이즈 조정 방법 > Q&A | 토론

본문 바로가기

SpreadJS

Q&A | 토론

PureJS 사용자 도형 그릴때 사이즈 조정 방법

페이지 정보

작성자 박태오 작성일 2020-10-12 14:38 조회 2,755회 댓글 0건
제품 버전 : spreadjs 13
컨트롤 이름 : Custom Shape

본문

사용자 도형 그릴때 질문입니다. 


도형 모델을 만들때 다음과같이 진행하고 있습니다. 


let Column = {

   

    variables : {

      w : "=width",

      h : "=height"

      

  },

    options: {

      fill: {

        type: 1,

        color: "rgba(100,170,200,1)",

        transparency: 0

      },

      stroke: {

        type: 1,

        width : 1,

        color: "black" ,//"rgba(0,0,0,1)"

      }

    },

    path: [


      [

        ["M", 0, "=variables.h*0.1"],

        ["Q", 0,0, "=controls.0.x",0],

        ["L", "=variables.w-controls.0.x",0],

        ["Q", "=variables.w", 0, "=variables.w","=variables.h*0.1"],

        ["L", "=variables.w", "=controls.2.y"],

        

        ["Q", "=variables.w","=controls.2.y+variables.h*0.1", "=variables.w-controls.1.x","=controls.2.y+height*0.1"],

        ["L", "=variables.w-controls.1.x", "=variables.h*0.9"],

        ["Q", "=variables.w-controls.1.x","=variables.h", "=variables.w*0.5","=variables.h"],

       

        ["Q", "=controls.1.x","=variables.h", "=controls.1.x","=variables.h*0.9"],

        ["L", "=controls.1.x", "=controls.2.y+variables.h*0.1"],

        ["Q", 0,"=controls.2.y+variables.h*0.1", 0,"=controls.2.y"],

        ["L", 0, "=variables.h*0.1"]

      ]

    ],

    controls: [

       //상위 ARC 조정 INDEX 0

      {

        x: "=BOUND(0.5*width, 0, false, 0,width*0.5)", // formula used to provide position and range limitation (here default at position (0, 0.2 * width), and the y range from 0 to 0.5*width)

        y: 0,

        xBehavior: 0,  // 0 if adjust in x (horizontal), otherwise 1

        yBehavior: 1   // 0 if adjust in y (vertical), otherwise 1

      },

       //하위 폭  조정 INDEX 1

       {

        x: "=BOUND(0.25*width, 0, false, 0 ,width*0.5)", // formula used to provide position and range limitation (here default at position (0, 0.2 * width), and the y range from 0 to 0.5*width)

        y: "=height",

        xBehavior: 0,  // 0 if adjust in x (horizontal), otherwise 1

        yBehavior: 1   // 0 if adjust in y (vertical), otherwise 1

      },

      //하위 arc  조정 INDEX 2

      {

        x: 0,

        y: "=BOUND(0.8*height,0 , false, 0.5*height, height*0.8)",

        xBehavior: 1,  // 0 if adjust in x (horizontal), otherwise 1

        yBehavior: 0   // 0 if adjust in y (vertical), otherwise 1

      }

    

     ],

    connectionPoints : [

      {x : 0, y : "=height*0.1"},

      {x : 0, y : "=height*0.15"},

      {x : 0, y : "=height*0.2"},

      {x : 0, y : "=height*0.25"},

      {x : 0, y : "=height*0.3"},

      {x : 0, y : "=height*0.35"},

      {x : 0, y : "=height*0.4"},

      {x : 0, y : "=height*0.45"},

      {x : 0, y : "=height*0.5"},

      {x : 0, y : "=height*0.55"},

      {x : "=controls.1.x", y : "=height*0.85"},

      {x : "=controls.1.x", y : "=height*0.9"},

      {x : "=width", y : "=height*0.1"},

      {x : "=width", y : "=height*0.15"},

      {x : "=width", y : "=height*0.2"},

      {x : "=width", y : "=height*0.25"},

      {x : "=width", y : "=height*0.3"},

      {x : "=width", y : "=height*0.35"},

      {x : "=width", y : "=height*0.4"},

      {x : "=width", y : "=height*0.45"},

      {x : "=width", y : "=height*0.5"},

      {x : "=width", y : "=height*0.55"},

      {x : "=width-controls.1.x", y : "=controls.2.y + height*0.1"},

      {x : "=width-controls.1.x", y : "=controls.2.y+height*0.15"}  

    ]

  };



궁금한것은 

모델자체에 width와 height를 선언하게 되면 export 시에 변경한 size가 반영이 안되어 

미리 선언하지않고 사용하고있습니다. 

그런데 선언을 하지 않으면 의도하지 않은 사이즈로 객체가 그려지게 됩니다.  

혹시 최초에 size를 선언할수 있는 방법이 있는지 문의 드립니다. 

의도한 그림은 다음과 같습니다. 

 

위코드로 생성되는 도형은 다음과 같습니다. 



 




답변 부탁 드립니다. 



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

PureJS Re: 사용자 도형 그릴때 사이즈 조정 방법

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루카스 작성일 2020-10-13 15:33 댓글 0건

본문

안녕하세요 그레이프시티입니다.


말씀하신 대로 하기 위해서는 모델에 width와 height를 선언하지 않고 도형을 추가할 때 시작과 끝 row, column을 설정해 주시면 됩니다.

  let shape = sheet.shapes.add(null, model);
  shape.startRow(1);
  shape.startColumn(1);
  shape.endRow(13);
  shape.endColumn(5);

Floating Object 도움말: https://www.grapecity.com/spreadjs/docs/v13/online/SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject.html

아래 데모와 코드를 확인하여 주시기 바랍니다.

다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.