이미지를 데코레이터로 요소에 추가하는 방법은 무엇입니까?

Rect 요소가 있고 그것을 왼쪽 상단의 작은 (16x16) PNG 이미지로 꾸미고 싶다고 상상해보십시오. 나는 그 일을 성취 할 방법을 결정할 수 없다. 필자는 문서를 연구했지만 그 작업을 수행하는 방법에 대한 샘플이나 참조를 찾을 수 없었습니다. 누구든지 내 목표를 달성하는 데 도움이 될 수있는 레시피 또는 샘플 포인터가 있습니까?이미지를 데코레이터로 요소에 추가하는 방법은 무엇입니까?

출처

2014-11-14 Kolban

사각형, 이미지 및 텍스트가있는 사용자 지정 모양을 만드는 것이 더 좋습니다. 이것은 훨씬 더 많은 유연성을 제공하며 하나의 모양을 나타 내기 위해 두 가지 요소가있을 필요가 없습니다. 왼쪽 상단에 작은 이미지로 장식 귀하의 모양처럼 보일 수 있습니다 :

joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({ 

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>', 

    defaults: joint.util.deepSupplement({ 

     type: 'basic.DecoratedRect', 
     size: { width: 100, height: 60 }, 
     attrs: { 
      'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 }, 
      'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' }, 
      'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 } 
     } 

    }, joint.shapes.basic.Generic.prototype.defaults) 
});

그리고 당신은 당신의 다이어그램과 같이 사용할 수 있습니다 :

모양을 지정하는 방법

var decoratedRect = new joint.shapes.basic.DecoratedRect({ 
    position: { x: 150, y: 80 }, 
    size: { width: 100, height: 60 }, 
    attrs: { 
     text: { text: 'My Element' }, 
     image: { 'xlink:href': 'http://placehold.it/16x16' } 
    } 
}); 
graph.addCell(decoratedRect);

주, 중요한 비트는 markup, type 및 일반 CSS 선택기 (여기서는 태그 선택기이지만 원하는 경우 클래스를 사용할 수 있음)로 SVG 요소를 참조하는 attrs 개체입니다. 이미지 태그의 경우 상대 위치 지정을 위해 JointJS 특수 특성 (ref, ref-x 및 ref-y)을 활용합니다. 이러한 속성을 사용하여 이미지를 rect 요소의 왼쪽 상단에 상대적으로 배치하고 상단 가장자리 (ref-y)에서 2 픽셀, 왼쪽 가장자리에서 2 픽셀만큼 오프셋합니다 (ref-x).

하나의 참고 : type ('basic.DecoratedRect') 특성이 모양이 정의 된 네임 스페이스 (joint.shapes.basic.DecoratedRect)와 일치해야합니다. JointJS가 JSON에서 그래프를 재구성 할 때 type 속성을보고 joint.shapes 네임 스페이스를 간단하게 조회하여이 유형에 대해 정의 된 모양이 있는지 확인하기 때문입니다.

출처

2014-11-14 20:12:04 dave

우리는 다음의 레서피를 이용하여 이미지 요소의 유형을 생성 할 수

var image = new joint.shapes.basic.Image({ 
    position : { 
     x : 100, 
     y : 100 
    }, 
    size : { 
     width : 16, 
     height : 16 
    }, 
    attrs : { 
     image : { 
      "xlink:href" : "images/myImage.png", 
      width : 16, 
      height : 16 
     } 
    } 
}); 

graph.addCell(image);

이 X = 100, Y = 100의 화상을 배치한다. 크기 너비/높이를 attrs/image 너비/높이와 일치시키고 이미지 자체의 너비/높이로 만드는 것이 중요합니다.

이전 요소를 장식하지 않지만 이전 요소 위에 배치하여 원하는 효과를 얻을 수 있습니다.

출처

2014-11-14 04:27:00 Kolban

이미지를 데코레이터로 요소에 추가하는 방법은 무엇입니까?

답변

관련 문제