PureJS 사용자 도형 그릴때 사이즈 조정 방법
페이지 정보
작성자 박태오 작성일 2020-10-12 14:38 조회 2,755회 댓글 0건본문
관련링크
사용자 도형 그릴때 질문입니다.
도형 모델을 만들때 다음과같이 진행하고 있습니다.
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를 선언할수 있는 방법이 있는지 문의 드립니다.
의도한 그림은 다음과 같습니다.
위코드로 생성되는 도형은 다음과 같습니다.
답변 부탁 드립니다.
댓글목록
등록된 댓글이 없습니다.