H5 Canvas를 사용하여 3D 동적 차트를 구현하는 방법

이번에는 H5 Canvas를 사용하여 3D 동적 차트를 구현하는 방법과 H5 Canvas를 사용하여 3D 동적 차트를 구현하는 주의 사항에 대해 설명하겠습니다.

산업용 SCADA나 통신망 관리에 사용되는 차트가 많이 있는 것을 발견했습니다. 대부분의 사람들이 차트 제작에 echart를 사용하지만 사용하기는 정말 쉬운데, 이때 다른 플러그인을 호출할 수 없는 경우가 있습니다. 이 아름다운 차트는 제가 직접 작성해야 하는데, 차트는 쉽게 아름다워질 수 없습니다. . . 웹사이트에서 판매하는 차트를 보고 꽤 괜찮다고 생각해서 Web 3D용 HT를 이용해서 작은 예제를 만들어 봤습니다. 꽤 간단하고 예쁘네요 ㅎㅎ~

이 예제는 일단 HT를 이용해서 구현하기가 정말 쉽습니다. HT에서 가장 기본적인 dm 데이터 모델을 생성한 다음 데이터 모델을 g3d 3d 구성 요소에 추가한 다음 3d에서 관점을 설정하고 3d 구성 요소를 body 요소에 추가합니다.

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
g3d.setEye(0, 185, 300);
g3d.addToDOM();
g3d.getView().style.background = '#000';

다음을 만듭니다. 다섯 개의 차트가 있습니다 내 생각은 다음과 같습니다. 내부 레이어에는 노드가 있고 외부 레이어에는 투명 노드가 있으며 하단에는 현재 백분율을 표시하는 3D 텍스트가 있습니다.

내부 레이어의 노드는 매우 쉽습니다. HT로 캡슐화된 ht.Node를 사용하여 새 노드 개체를 직접 만든 다음 node.s 메서드를 통해 노드 노드의 스타일을 설정했습니다.

var node = new ht.Node();
node.s({
    'shape3d': cylinderModel,
    'shape3d.color': color,
    '3d.movable': false
});
node.a({
    'myHeight': s3[1],
});
node.p3([p3[0], s3[1]/2, p3[2]]);
node.s3(s3);
dm.add(node);

설명할 내용 네, 'shape3d':cylinderModel 스타일 설정입니다. 먼저, Shape3d attribute는 3D 모델로 표시되는 아이콘 효과를 지정합니다. :

cylinderModel = ht.Default.createCylinderModel(1000, 0, 1000, false, false, true, true);

그런 다음 동적으로 변경되는 myHeight 속성이 설정됩니다. HT에서는 node.a 메소드가 사용자가 비즈니스 데이터를 저장하도록 예약되어 있습니다.

다음으로 만들어야 할 것은 외부 투명 노드입니다. 이 노드의 구성은 기본적으로 내부 노드와 동일하며 좀 더 "투명한" 스타일 설정이 있습니다.

var cNode = new ht.Node();
cNode.s({
    'shape3d': cylinderModel,
    'shape3d.transparent': true,
    'shape3d.opacity': 0.2,   
    'label.color': '#fff',
    '3d.movable': false
});
cNode.p3([p3[0], 50, p3[2]]);
cNode.s3(20, 100, 20);
dm.add(cNode);

먼저 '를 설정해야 합니다. Shape3d.transparent'가 true인 다음 'shape3d.opacity' 투명도를 설정합니다.

마지막은 3D 텍스트입니다. 3D 텍스트를 렌더링하려면 json 형식의 서체 글꼴이 필요하며, ht.Default.loadFontFace를 통해 json 형식 글꼴을 메모리에 로드합니다. 자세한 내용은 Web 3D용 HT를 참조하세요. manual:

ht.Default.loadFontFace('./wenquanyi.json', function(){
    //......
    var text = new ht.Node();
    text.s3([5, 5, 5]);
    text.p3(cNode.p3()[0]-5, -10, 0);
    dm.add(text);
    text.s({
        'shape3d' : 'text',
    'shape3d.text': node.a('myHeight')+'%',
    'shape3d.text.curveSegments': 1,
    '3d.movable': false
    });
});

저희가 사용하는 서체 폰트는 한 단어가 무수히 많은 삼각형으로 구성되어 메모리를 많이 차지하는 방식으로 그려지기 때문에 그래픽 곡선의 세밀함을 더 낮은 수준이지만 여전히 매우 명확합니다. 찾으면 더 나은 성능의 글꼴을 사용할 수 있으며 메모리를 덜 차지하는 글꼴을 찾지 못했습니다.

마지막으로 차트의 막대 차트를 동적으로 변경하려면 애니메이션을 설정하고 3D 글꼴 값을 동기식으로 업데이트해야 합니다.

setInterval(function(){
    if(node.a(&#39;myHeight&#39;) < 100){
        node.a(&#39;myHeight&#39;, (node.getAttr(&#39;myHeight&#39;)+1));
    node.s3(20, node.a(&#39;myHeight&#39;), 20);
    node.p3(p3[0], node.a(&#39;myHeight&#39;)/2, p3[2]);
    }else{
        node.a(&#39;myHeight&#39;, 0);
    node.s3([20, 0, 20]);
    node.p3([p3[0], 0, p3[2]]);
    }
    if (text) text.s(&#39;shape3d.text&#39;, node.a(&#39;myHeight&#39;)+&#39;%&#39;);
}, 100);

여기서 내 사용자 정의 속성인 "myHeight"가 결정적인 역할을 합니다. 변수를 저장하고, 변수의 값을 마음대로 변경할 수 있어 동적 바인딩 효과를 얻을 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML5 페이지를 iPhone에 적용하는 문제에 대하여

위 내용은 H5 Canvas를 사용하여 3D 동적 차트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!