Question

所以我试图用kinetic.js创建一个自定义形状，但我遇到了一个问题。我在点击时调用一个函数，它应该显示一个新图形，但是我收到错误：

未捕获的TypeError：undefined不是函数

这是功能代码：

    function helpShow(){
    var stage = new Kinetic.Stage({
        container: 'SkateboardCanvas',
        width: 800,
        height: 500
    });

    var layer = new Kinetic.Layer();

    var helpMenu = new Kinetic.Shape({
        drawFunc: function(context) {
        context.beginPath();
        context.moveTo(600,500);
        context.lineTo(600,450);
        context.moveTo(200,500);
        context.lineTo(600,500);
        // x1, y1, x2, y2, radius
        console.log(context);
        context.arcTo(600,350,550,350,50);
        context.lineTo(250,350);
        context.moveTo(200,500);
        context.lineTo(200,450);
        context.arcTo(200,350,250,350,50);
        context.closePath();
        context.fillStrokeShape(this);
    },
        fill: 'rgba(255, 255, 255, 0.5)',
        stroke: 'black',
        strokeWidth: 4
    });

    layer.add(helpMenu);
    console.log(layer);
    console.log(stage);
    stage.add(layer);
}

抛出错误的行是：

context.arcTo(600,350,550,350,50);

这是控制台日志，显示所有内容都已定义。

Kinetic.Layer {nodeType：“Layer”，canvas：Kinetic.SceneCanvas，hitCanvas：Kinetic.HitCanvas，children：Kinetic.Collection [1]，_id：2 ...}    creatorCanvas.js：86

Kinetic.Stage {nodeType：“Stage”，children：Kinetic.Collection [0]，_ id：1，eventListeners：Object，attrs：Object ...}    creatorCanvas.js：87

Kinetic.SceneContext {canvas：Kinetic.SceneCanvas，_context：CanvasRenderingContext2D，_fillColor：function，_fillPattern：function，_fillLinearGradient：function ...}

此外，画布和上下文在JavaScript文件的顶部定义如下：

var canvas = $("#SkateboardCanvas");
var context = canvas.get(0).getContext("2d");

我对这一切都比较新，所以对于为什么会发生这种情况的任何帮助/解释都会很棒，或者如果我是一个完整的新手我会道歉。

Answer 1

Kinetic.Shape给出的上下文实际上是围绕实际画布上下文的包装。

您给出的包装器不支持路径context.arcTo命令。

您有几种解决方法：

重构你的形状以使用context.quadraticCurveTo而不是arcTo。
将Kinetic.Shape替换为使用屏幕外html画布元素作为其图像源的Kinetic.Image。这样您就可以在屏幕外的画布上使用原生画布的.arcTo命令。

这是＃2的演示：http://jsfiddle.net/m1erickson/u69A8/

var myShape=new Kinetic.Image({
    x:10,
    y:10,
    image:drawTab(),
});
layer.add(myShape);
layer.draw();

function drawTab(){
    var canvas=document.createElement("canvas");
    var context=canvas.getContext("2d");
    canvas.width=400;
    canvas.height=150;
    context.save();
    context.translate(-200,-350);
    context.beginPath();
    context.moveTo(600,500);
    context.lineTo(600,450);
    context.moveTo(200,500);
    context.lineTo(600,500);
    // x1, y1, x2, y2, radius
    context.arcTo(600,350,550,350,50);
    context.lineTo(250,350);
    context.moveTo(200,500);
    context.lineTo(200,450);
    context.arcTo(200,350,250,350,50);
    context.closePath();
    context.fillStyle="red";
    context.fill();
    context.restore();
    return(canvas);
}

TypeError：＆＃34; undefined不是函数＆＃34;

1 个答案: