0

みなさん、こんにちは。html5を初めて使用します。easelJSライブラリを使用するコードを記述しました。画像を読み込んだので、さまざまなマウスイベントを試したいです。キャンバスに画像を読み込んだのですが、正常に動作しています。マウスを上に置くと画像が拡大したいのですが、なぜ機能しないのかわかりません。ここで見逃したのは私のコードです。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="EaselJS/lib/easel.js"></script>
<script>
var canvas;
var stage;
var img , pic;
var update =true;
function init() {

    canvas = document.getElementById("canvas");
    stage = new Stage(canvas);
        img = new Image();
    img.src = "picture.png";
    img.onload = setimage;

}
function setimage(event){
  pic = new Bitmap(img);
  stage.addChild(router);   
  pic.x = canvas.width - 90;
     (function(target) {
                pic.onMouseOver = function() {
                target.scaleX = target.scaleY = target.scale*1.2;
                update = true;
                }
     })(pic); 
   Ticker.addListener(window);

}
function tick() {
    if (update) {
        update = false; // only update once
        stage.update();
    }
}

</script>
<style>
 #div1, #div2
{
    float:left;
    width:100;
    height:150;
    margin:10px;
    padding:10px;
    border:1px solid #aaaaaa;}

</style>
</head>

<body onLoad="init()">
<div id="div1">
<canvas id="canvas" width="100" height="150" ></canvas> 
</div>
<body>
</html>

ありがとう

4

2 に答える 2

1

まず、マウス イベントを受け入れるようにステージをセットアップする必要があります。

stage.enableMouseOver();
于 2012-05-10T11:58:08.140 に答える
0

これを実現するために、JavaScriptの代わりにCSS3スケール変換を使用することもできます。もちろん、それはこの機能をサポートするブラウザでのみ機能しますが、それはあなたが望むものではないかもしれません。

于 2012-03-29T08:50:47.237 に答える