2014-02-07 89 views
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);

回答

0

您有幾個語法錯誤。

首先,則必須使用其中認爲每個sceneFunc的Kinetic.Shape語法與fillStrokeShape

// You must conclude your sceneFunc with this specific KineticJS context method 
    context.fillStrokeShape(this); 

,則sceneFunc功能由KineticJS本身給定語境的說法。

sceneFunc: function(context) { ... } 

您無法爲drawScene提供額外的參數。

// not allowed! 

sceneFunc: function(ctx, x, y, w, h) { ... } 

相反的屬性添加到您的泡沫對象,以便它們可在sceneFunc叫做:

var bubble = new Kinetic.Shape({ 
    sceneFunc: function(ctx) { 
     var x=this.myX; 
     var y=this.myY; 
     var w=this.myW; 
     var h=this.myH; 
     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 
    }); 
    bubble.myX=x; 
    bubble.myY=y; 
    bubble.myW=w; 
    bubble.myH=h; 

    ... 

}

+0

謝謝你這是什麼有很大的幫助 – Richy