2
그래서 데이터베이스에서 가져온 숫자를 기반으로 모양을 동적으로 만들려고합니다. 나는 for 루프를 포장하는 가장 논리적 인 방법을 시도해왔다. 모양을 만들고 모양을 레이어에 추가하는 것이다. 그러나 나에게 알려지지 않은 어떤 이유로 인해, 레이어에 저장된 모양이 다른 위치 (및 다른 속성)에 있어야하더라도 동일한 모양을 다시 수정합니다. 단지 새로운 형태를 생성하기 위해 배열의 모양을 넣어 및 루프에 대한 이내에에 추가하는KineticJS - 동적으로 도형 만들기
function graph(w) {
barLayer.removeChildren();
var bar = new Array();
for (var i = 1; i <= array.length; i++) {
var pos = i * Math.PI/30;
var scaleUp = (i/array.length) * 2.5;
bar[i-1] = new Kinetic.Shape({
drawFunc: function(context) {
context.beginPath();
context.moveTo(radius2, radius2);
context.arc(radius2, radius2, scaleUp * radius2, (- Math.PI/2) - w + pos, (- Math.PI/2) - w + (Math.PI/30) + pos, false);
context.closePath();
this.stroke(context);
this.fill(context);
},
fill: "#333",
stroke: "#000",
strokeWidth: 4,
x: centerX,
y: centerY,
offset: [200,200],
});
console.log("Starting: ", (- Math.PI/2) - w + pos, "/ Ending: ", (- Math.PI/2) - w + (Math.PI/30) + pos);
}
for (var n = 0; n < bar.length; n++) {
barLayer.add(bar[n]);
}
barLayer.draw();
}
내가 해봤 다 :
내 코드는 다음과 같다. 나는 확실히 뭔가를 놓친다.
나는이 주제에 대한 검색의 비트를 수행하고 내가 할 노력하고있어 하나의 코멘트 관련 발견 : 당신이 모양 객체의 배열을 유지하고 새로운 추진해야 할 필요가
을 기본적으로 새 모양을 추가 할 때 객체를 배열에 배치 할 수 있습니다. kin 객체의 setDrawStage() 메서드 내에서 배열을 반복하고 각 객체를 그립니다. 실험실 발행 시점을 알려 드리겠습니다.
나는 setDrawStage() 메소드를 다 검토했는데, 관련된 많은 데이터를 찾을 수 없다. 그는 또한 for 루프를 메서드 내부에 두는 것을 언급했는데, 이는 모양을 그리기 만하고 레이어에 저장하기 때문에 조금 혼란 스럽습니다 (다른 모든 모양에 대해 수행 한 것처럼).
해결책이있는 사람이 있습니까? 진보 된 부분에서 높이 평가되었습니다.
감사합니다. 그것은 지금 잘 작동했고, 종결의 본질을 완전히 이해하지 못했습니다. 어쨌든, 원형 대신에 모양을 사용하고 있는데, 그 이유는 원형을 사용하여 막대 그래프 (높이를 반지름으로 사용)를 그렸기 때문에 모양을 가장 명확하게 나타낼 수있는 것처럼 보였습니다. –
이봐, jsfiddle이나 코드를 직접 추가 할 수 있다면 좋을 것이다. 나는 그것이 작동하지 않습니다 : / – Dominik