使用Kinetic JS Framework重绘图像

时间:2013-02-25 09:51:44

标签: javascript html5 canvas html5-canvas kineticjs

概要

我的问题涉及使用KineticJS,但在我提出问题之前 - 我将概述项目然后讨论我的问题。

任务

我的任务是创建一个调整大小的壁炉环绕,以便所述个人可以使用数字形式来改变环绕声的大小,唯一应该改变的部分是它们的高度中的Jambs(腿两侧)和壁炉架顶部。

现在环绕声需要由图像构成,因此它被分解为单独的元素,因此当图像的宽度被拉伸时,整个环绕声不会。

我已经创建了画布并引用了KineticJs我正在使用的框架,这个项目可以从易于使用的层和舞台设计中受益,类似于Adobe Flash。

问题

加载所需的所有图像后出现问题。我已经使用了JQUERY的abit来调用函数来绘制环绕声,并在文档准备好后加载它的单独部分。

在那里,我有一个更改事件功能,一旦用户与数字表格交互,就可以调整环绕声的大小。

问题是所有环绕变量都包含在一个名为drawomething()

的函数中

现在他们是我在另一个地方需要的那个功能的本地人。

我知道我可能需要重构我的代码才能使其正常工作。我不完全确定从哪里开始。

有人可以从指向正确的方向开始吗?

    <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Project Two</title>
<script type="text/javascript" src="kinetic-v4.3.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

$(document).ready(function(){
    drawSomething();
    $("#slider").change(function(){

        redraw();

        });


    })




    function drawSomething(){


    var imageObj = new Image();
    var leftMantel = new Image();
    var rightMantel = new Image();
    var leftJamb = new Image();
    var rightJamb = new Image();
    var leftFoot = new Image();
    var rightFoot =  new Image();   

        imageObj.src = "octon_mantel.png";

    imageObj.onload = function(){



    var image = new Kinetic.Image
        ({
            x:450,
            y:150,
            width:280,
            height:117,
            image: imageObj
        });

            layer.add(image);
            layer.draw();
}



    leftMantel.onload = function(){
    var LeftMant = new Kinetic.Image({

            x:300,
            y:150,
            width:150,
            height:117,
            image: leftMantel


        }); 

        layer.add(LeftMant);
        layer.draw();
    }


    rightMantel.onload = function(){
    var RightMant = new Kinetic.Image({

            x:730,
            y:150,
            width:150,
            height:117,
            image: rightMantel


        });

        layer.add(RightMant);
        layer.draw();
            }




    rightJamb.onload = function(){      
    var RightJamb = new Kinetic.Image({

            x:732,
            y:267,
            width:105,
            height:200,
            image: rightJamb


        });     

        layer.add(RightJamb);
        layer.draw();
        }



    rightFoot.onload = function(){  
    var RightFoot = new Kinetic.Image({

            x:732,
            y:465,
            width:104,
            height:127,
            image: rightFoot


        }); 

        layer.add(RightFoot);
        layer.draw();
        }





    leftJamb.onload = function(){
    var LeftJamb = new Kinetic.Image({

            x:343,
            y:267,
            width:105,
            height:200,
            image: leftJamb


        });

        layer.add(LeftJamb);
        layer.draw();

            }


    leftFoot.onload = function(){   
    var LeftFoot = new Kinetic.Image({

            x:344,
            y:465,
            width:104,
            height:127,
            image: leftFoot


        }); 

        layer.add(LeftFoot);
        layer.draw();

        }

    //Image Location Declaration
    imageObj.src = "octon_mantel.png";
    leftMantel.src = "octon_mantel_left.png";
    rightMantel.src = "octon_mantel_right.png";
    rightJamb.src = "octon_jamb_right.png";
    rightFoot.src = "octon_foot_right.png";
    leftJamb.src = "octon_jamb_left.png";
    leftFoot.src = "octon_foot_left.png";








    }



function redraw(){


        alert("hey");



        }




</script>
<style>
body {
    background-color:#fff;
}
</style>
</head>

<body>

<form style="float:left; height:600px; margin-top:30px; margin-left:30px;">
  <fieldset style="height:600px; border:solid 2px black; border-radius:10px;">
    <legend style="font-size:18px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Fireplace Surround</legend>
    <br/>
    Mantel width<br/>
    <input type="number" value="280" id="slider"/>
    <br/>
    <br/>
    Jamb Height<br/>
    <input type="number" value="200" id="jambheightSlider"/>
  </fieldset>
</form>
<div id="myCanvas"></div>
<script>

var stage = new Kinetic.Stage
({
    container: myCanvas,
    width:900,
    height: 700


});

    var layer = new Kinetic.Layer();
    stage.add(layer);

</script>
</body>
</html>

此致

亚当

1 个答案:

答案 0 :(得分:1)

所以......你有

function drawSomething(){


var imageObj = new Image();
var leftMantel = new Image();
var rightMantel = new Image();
var leftJamb = new Image();
var rightJamb = new Image();
var leftFoot = new Image();
var rightFoot =  new Image();   
//.... Other stuff
}

并且您希望变量的范围不是函数本身的本地。简单的修复/黑客:

var imageObj;
var leftMantel;
var rightMantel;
var leftJamb;
var rightJamb;
var leftFoot;
var rightFoot;

function drawSomething(){
   imageObj = new Image();
   leftMantel = new Image();
   rightMantel = new Image();
   leftJamb = new Image();
   rightJamb = new Image();
   leftFoot = new Image();
   rightFoot =  new Image();   
   //.... Other stuff
}

现在你的函数只修改现有的变量,这些变量可以在函数外部访问。