warp.jsライブラリを正しく動作させるには？

-1

このライブラリが他の人にとって興味深いのかどうかは分かりませんが、それはいくつかの点で私の自尊心に挑戦しています。コードは実際の仕事からではなく、学習目的のためだけです。ご覧のとおり、私は「こんにちはの世界」を実行しようとしていただけですが、公式文書（https://tinkeringwithstuff.com/posts/canvas-warping-with-javascript.html）に説明できない何かがあるはずです。誰かがそれを経験しているなら、彼らの助けがうまく受け入れられます。ありがとう。warp.jsライブラリを正しく動作させるには？

//input canvas 
 
    var c = document.getElementById("input_canvas"); 
 
    var ctx = c.getContext("2d"); 
 
    var img = document.getElementById("scream"); 
 
    ctx.drawImage(img, 0, 0); 
 

 

 
//viewport canvas 
 
var warp = new Warp({ 
 
\t input_canvas: $('#input_canvas').get(0), 
 
\t viewport_canvas: $('#viewport_canvas').get(0), 
 
\t top: 100, 
 
\t left: 100 
 
}); 
 

 
warp.deform({ 
 
\t center: {x: 100, y: 100}, 
 
\t radius: 50, 
 
\t angle: 45 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
    \t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
\t \t <script src="https://tinkeringwithstuff.com/projects/canvas_warp/warp.js"></script> 
 
\t </head> 
 
\t <body> 
 

 
\t \t 
 
<img id="grid" width="220" height="277" src="https://rapidpurple.com/tool_src/i/151.png" alt="The Grid" style="display: none;"> 
 

 
<p>Canvases:</p> 
 
<canvas id="vp_canvas" width="200" height="200" style="float: left"></canvas> 
 
<canvas id="input_canvas" width="240" height="297" style="diaplay:none"></canvas> 
 
\t </body> 
 
</html>

出典

2017-12-21 G.ManJi

スニペットに** screamの** ID **の要素がありません... – NewToJS

あなたは正しいです、私は私のエディタで修正されました。 "scream"は "grid"でなければなりません。とにかく、私のコンソールは言っている：Uncaught TypeError：Warp._init（warp.js：30）で未定義のプロパティ '幅'を読み取ることができません new warp（warp.js：12） at warp.php：24 –

あなたが受けていたTypeError: Cannot read property 'width' of undefinedエラーがワープライブラリがオプションオブジェクトに渡されたjQueryのセレクタからキャンバスの幅を把握することができないという結果でした。バニラJavaScriptセレクタのjQueryセレクタをオフにすると、以下のように問題が解決されます。

var c = document.getElementById("input_canvas"); 
 
var ctx = c.getContext("2d"); 
 

 
var img = new Image(); 
 
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAACXAQMAAAAiUVs6AAAABlBMVEUEAgT8/vxJvsdeAAAAO0lEQVRIx+3QIQEAIBDAwG9ONKIQAYng+VGAAIhNTl7Eo1YcNovJoNOK9JGhlVZaaaWVVlpppZVWH1ldXoWGgHcSIkEAAAAASUVORK5CYII='; 
 
img.onload = function() { 
 
    ctx.drawImage(img, 0, 0); 
 
    
 
    var warp = new Warp({ 
 
     input_canvas: $('#input_canvas').get(0), 
 
     viewport_canvas: document.getElementById("vp_canvas"), 
 
     top: 100, 
 
     left: 100 
 
    }); 
 
    
 
    warp.deform({ 
 
     center: {x: 100, y: 100}, 
 
     radius: 50, 
 
     angle: 45 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://tinkeringwithstuff.com/projects/canvas_warp/warp.js"></script> 
 
<p>Canvases:</p> 
 
<canvas id="vp_canvas" width="200" height="200" style="float: left"></canvas> 
 
<canvas id="input_canvas" width="240" height="297" style="display:none"></canvas>

N.B.このデモの目的上、rapidpurple.comサーバーから画像をロードするときに、tainting the canvasを避けるためにBase 64で画像をエンコードしました。

出典

2017-12-24 13:53:41 almcd

warp.jsライブラリを正しく動作させるには？

答えて

関連する問題