TypeError : "undefined is not function"

kinetic.js를 사용하여 사용자 정의 모양을 만들려고하는데 문제가 발생했습니다. 나는 새 도면을 표시해야 클릭에 함수를 호출하고 있지만 오류 얻을 :TypeError : "undefined is not function"

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); 
}

그것이에 오류를 던지고 라인 : 여기

Uncaught TypeError: undefined is not a function

은 기능 코드입니다 :

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

그리고 여기에 모든 내용이 정의되어있는 콘솔 로그가 있습니다.

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

나는이 될 일이 왜 모든 그래서 어떤 도움/설명이 비교적 새로운 오전 다음과 같이

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…}

또한 캔버스와 컨텍스트는 자바 스크립트 파일의 맨 위에 정의 위대한 또는 만약 내가 완전히 newb되는 사과드립니다.

출처

2014-04-11 Adam Davies

Kinetic.Shape에 의해 주어진 컨텍스트는 실제로는 실제 캔버스 컨텍스트를 둘러싼 래퍼입니다.

제공된 래퍼는 path context.arcTo 명령을 지원하지 않습니다.

대신 arcTo의 context.quadraticCurveTo를 사용하도록 모양을 리팩토링 :

당신은 몇 가지 해결 방법이 있습니다.

Kinetic.Shape를 이미지 소스로 오프 스크린 html 캔버스 요소를 사용하는 Kinetic.Image로 바꿉니다. 이렇게하면 네이티브 캔버스의 .arcTo 명령을 오프 스크린 캔버스에서 사용할 수 있습니다. 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); 
}

: 여기

은 # 2의 데모입니다

출처

2014-04-11 19:10:35 markE

TypeError : "undefined is not function"

답변

관련 문제