Kinetic.js 使用函数绘制形状

Question

我正在尝试用我当前的画布代码实现 kinetic.js。

我正在绘制一个图表（来自 json 数据的多个椭圆）并绘制它们

下面我的代码中的sn-ps

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(气泡);

Answer 1

您有几个语法错误。

首先，您必须使用以fillStrokeShape结束每个sceneFunc的Kinetic.Shape语法

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

其次，sceneticJS 本身给sceneFunc 函数一个上下文参数。

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;

  ...

}