RaphaelJS를 사용하여 다이어그램 도구를 만들고 문제가 발생하여 캔버스 용지에 그려진 도형을 어떻게 편집 할 수 있는지 알 수 없습니다. 예를 들어, 아래에 포함 된 요소를 수정하는 방법을 알고 난은 UML의 클래스 모양을 만드는 데 사용할 지금하고자하는 코드는, 임 BTW Mootools의 사용 :RaphaelJS에서 모양 수정 또는 다시 그리기?
var uml_Class = new Class(
{
initialize: function(name)
{
this.className = name;
this.pointA_X = 1; this.pointA_Y = 1;
this.pointB_X = 150; this.pointB_Y = 1;
this.pointC_X = 1; this.pointC_Y = 40;
this.pointD_X = 150; this.pointD_Y = 40;
this.pointE_X = 1; this.pointE_Y = 100;
this.pointF_X = 150; this.pointF_Y = 100;
this.pointG_X = 1; this.pointG_Y = 160;
this.pointH_X = 150; this.pointH_Y = 160;
this.generate_Shape();
},
generate_Shape: function()
{
this.classSet = paper.set();
this.classSet.push
(
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y).attr({"fill":"white"}),
this.line_Attrib = paper.path("M " + this.pointC_X + " " + this.pointC_Y + " L " + this.pointD_X + " " + this.pointD_Y),
this.line_Method = paper.path("M " + this.pointE_X + " " + this.pointE_Y + " L " + this.pointF_X + " " + this.pointF_Y),
this.classText = paper.text(this.pointB_X/2, this.pointA_Y+20, this.className).attr({"font-size":"14"}),
this.attribText = paper.text(this.pointD_X/2, this.pointC_Y+10, "Attributes").attr({"font-size":"10"}),
this.methodText = paper.text(this.pointF_X/2, this.pointE_Y+10, "Methods").attr({"font-size":"10"})
);
this.shapeBase.draggable.enable();
},
add_new_Attrib: function()
{
},
add_new_Attrib: function()
{
}
});
위의 코드 것은 잘 작동하고 내 캔버스에
- 이름 영역
- ATTRIB 영역
- 메소드 영역 : 클래스가 이름을 표시하고 세 개의 섹션을 생성하기 위해 상기베이스에 대한 직사각형 두 라인을 사용하여 생성되는 생성 된 0
shapeBase 사각형 변수를 드래그 할 수있게하면 사용자가이 도형 내에서 아무 곳이나 드래그 할 수 있음을 의미합니다.이 기능은 다시 정상적으로 작동합니다.
이제 add_new_Attrib 및 add_new_Method의 두 함수를 코딩하려고합니다. attrib 함수는 먼저 새 속성 항목에 대한 공간을 만들기 위해 전체 높이에 20을 추가하여 큐브의 크기를 조정하거나 늘린 다음 메서드 줄 (line_Method)과 텍스트 (method_Text)를 20만큼 이동해야합니다.
add_new_method 행은 새 메소드 항목을위한 공간을 만들기 위해 shapeBase 사각형을 20만큼 증가시켜야합니다.
나는 내가 add_new_Attrib 모양에 다음 코드를 삽입 할 때, 내가 shapeBase을 다시 그리기 위해 노력하고 있어요 예를 들어,이 작업을 수행 할 수있는 방법을 찾을 수가 질수 있지만 대신 완전히 새로운 사각형을 그립니다
add_new_Attrib: function()
{
this.shapeBase = paper.rect(this.pointA_X,this.pointA_Y,this.pointH_X,this.pointH_Y+20).attr({"fill":"white"});
},
아무도 내 크기 내에서 사각형과 경로의 크기를 조정하거나 위치를 변경하는 방법을 알려주시겠습니까?
입력하신 내용을 알려 주셔서 감사합니다.
add_new_Attrib: function()
{
var bbox = this.shapeBase.getBBox();
this.shapeBase.attr({'height': bbox.height + 20, "fill":"white"})
}
은 번역 모양, 위치를 변경하려면 (링크 할 수 있지만, 동일한 문서로 위에) :