0
我試圖用我當前的畫布代碼實現kinetic.js。Kinetic.js使用函數繪製形狀
林繪製圖形(從數據在JSON一些橢圓的),並從我的代碼繪製他們
片段下方
if(canvas.getContext)
{
$.getJSON("bubbles.json", function(data) {
var maxHour= 69;
$.each(data, function(i) {
var oneDay = 24*60*60*1000;
var startOfQ = new Date(2014,00,00);
var startDate = new Date(data[i].summary.created_on);
console.log(startDate);
var endDate = new Date(data[i].summary.target_date);
var startDayPos = (Math.round(Math.abs((startOfQ.getTime() - startDate.getTime())/(oneDay))))*6;
var diffDays = (Math.round(Math.abs((startDate.getTime() - endDate.getTime())/(oneDay))))*6;
var endDayPos = startDayPos + diffDays ;
hours=(data[i].summary.total_hours);
base = graph.height() - yPadding;
getMaxY(hours);
hours_scale =((graph.height()-(graph.height() - (((graph.height() - yPadding)/maxHour)))) *hours)
total_hours = 970 - hours_scale;
//drawEllipse(ctx, startDayPos, 970, endDayPos, -total_hours);
drawEllipse(ctx, startDayPos, base, endDayPos, -hours_scale);
});
drawGraph();
});
}
function drawEllipse(ctx, x, y, w, h) {
var kappa = .5522848,
ox = (w/2) * kappa, // control point offset horizontal
oy = (h/2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w/2, // x-middle
ym = y + h/2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.fillStyle = "rgba(142, 214, 255, 0.5)";
ctx.fill();
ctx.stroke();
}
我即時通訊試圖複製與kenic.js此功能有語法,但不是100%如何做到這一點,我想這
function drawEllipse(ctx, x, y, w, h) {
var bubble = new Kinetic.Shape({
sceneFunc: function(ctx, x, y, w, h) {
var kappa = .5522848,
ox = (w/2) * kappa, // control point offset horizontal
oy = (h/2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w/2, // x-middle
ym = y + h/2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.fillStyle = "rgba(142, 214, 255, 0.5)";
ctx.fill();
ctx.stroke();
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4
});
}
// add the triangle shape to the layer
layer.add(bubble);
// add the layer to the stage
stage.add(layer);
我得到的是沒有定義的泡沫
layer.add(bubble);
謝謝你這是什麼有很大的幫助 – Richy