使用Kinetic JS Framework重绘图像
[英]Redrawing images using Kinetic JS Framework
问题描述
大纲
我的问题涉及KineticJS的使用，但在提出问题之前-我将概述项目，然后讨论我的问题。
任务
我的任务是创建一个可调整大小的壁炉围栏，以便该人可以使用数字形式来更改围栏的大小，唯一应实际更改的部分是其高度中的门Jam（左右两边的双腿）和顶部的壁炉架。
现在，需要用图像制作环绕声，因此将其分解为单独的元素，因此当拉伸图像的宽度时，不需要整个环绕声。
我已经创建了画布，并引用了KineticJs这个项目所使用的框架，以从其易于使用的图层和舞台设计（类似于Adobe Flash）中受益。
问题
加载所有需要的图像后出现我的问题。 一旦文档准备好，我已经使用了一些JQUERY来调用该函数来绘制边框并加载其单独的部分。
到达那里后，一旦用户与数字表单交互，我便准备好了一个更改事件功能来调整环绕声的大小。
问题是所有环绕声变量都包含在名为drawsomething（）的函数中
现在它们是该功能的本地功能，我需要在另一个功能中使用。
我知道我可能必须重组我的代码才能使其正常工作。 我不完全确定从哪里开始。
有人可以从正确的方向指我开始吗？
<!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 个解决方案
解决方案1
1 已采纳 2013-02-25 14:39:29
所以你有了
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
}
现在，您的函数只需修改现有变量，即可在函数外部进行访问。
使用动态JS画布调整图像大小并保持比例
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.