Kinetics.js可以根据用户操作自动重新绘制画布
Kinetics.js to automatically redraw canvas on user actions
我使用Kinetics.js操作我的画布和jQuery来处理用户操作。所以,当我一个接一个地使用它们时,所有的功能都能很好地工作。但是,当我尝试将两个函数组合为一个事件时,如$('.selections img')。单击……(见下文)该函数只设置背景并忽略文本。然而,文本层已经创建,但由于某种原因,我看不到它。我试图更改函数调用的顺序,但没有成功。
当我检查控制台时,并没有错误或警报,当我使用console.log检查我的变量时,所有变量都会打印到控制台。
这里可能有什么问题?
PS。这里的目标是保存img和t变量,并使用它们:首先在画布上绘制背景,第二次打印文本在现有背景上的单独层
img = '';
t = '';
function setCanvas (){
hiddenCanvas = new Kinetic.Stage({
container : 'hiddenCanvasHolder',
width : 2340,
height : 1660
});
}
function setBackground (image){
background = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function (){
var backImg = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 2340,
height: 1660
});
background.add(backImg);
hiddenCanvas.add(background);
};
imageObj.src = image;
}
function setText(txt){
textLayer = new Kinetic.Layer ();
var text = new Kinetic.Text({
x: 200,
y: 500,
text: txt,
fontSize: 70,
fontFamily: 'Calibri',
fill: '#555',
align: 'center'
});
textLayer.add(text);
hiddenCanvas.add(textLayer);
}
$(document).ready(function(e) {
setCanvas();
setBackground(img);
setText(t);
/* Handles image selection and background setting for canvas */
$('.selections img').click(function(e) {
img = $(this).attr('alt');
textLayer.destroy();
background.destroy();
setBackground(img);
setText(t);
});
/* Handles text input field and text printing to canvas */
$('#print').click(function(e) {
t = $('#quoteInput').val();
background.destroy();
setBackground(img);
textLayer.destroy();
setText(t);
});
/* Handles quote selection from database instead of input it manually */
});
函数范围内隐藏了其他函数所需的变量。
- 隐藏画布
- 背景
- 文本层
- img
- t
所以,
- 将这些变量设置为全局变量或
- 在需要的地方传递,或者
- 在需要时创建
更好的资源方法是在层中销毁yChildren(),而不是销毁层本身:
background.destroyChildren();
textLayer.destroyChildren();
此外,您还将图像路径存储在img的alt属性中。
这是对残疾观众的不尊重,他们需要这种财产来帮助他们理解图像。
以下是代码和Fiddle:http://jsfiddle.net/m1erickson/ZFz3z/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:234px;
height:234px;
}
</style>
<script>
$(function(){
var hiddenCanvas = new Kinetic.Stage({
container : 'container',
width : 234,
height : 234
});
var background = new Kinetic.Layer();
hiddenCanvas.add(background);
var textLayer = new Kinetic.Layer();
hiddenCanvas.add(textLayer);
function setBackground (image){
var imageObj = new Image();
imageObj.onload = function (){
var backImg = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 234,
height: 234
});
background.destroyChildren();
background.add(backImg);
background.draw();
};
imageObj.src = image;
}
function setText(txt){
var text = new Kinetic.Text({
x: 20,
y: 50,
text: txt,
fontSize: 36,
fontFamily: 'Calibri',
fill: '#555',
align: 'center'
});
textLayer.destroyChildren();
textLayer.add(text);
textLayer.draw();
}
/* Handles image selection and background setting for canvas */
$('.imgs').click(function(e) {
img = $(this).attr('src');
setBackground(img);
});
/* Handles text input field and text printing to canvas */
$('#print').click(function(e) {
t = $('#quoteInput').val();
setText(t);
});
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
<button id="print">Text</button>
<input id="quoteInput" type="text" value="Hello">
<img class="imgs" src="houseicon.png">
</body>
</html>
相关文章:
- 使用新参数通过服务器端处理重新绘制引导数据表
- 在新窗口中打开时,未在画布中绘制图像
- 在新框架上绘制图像,同时仍然使用P5.js中的利萨茹曲线
- 将许多新图像绘制到画布时内存泄漏
- 有没有一种好方法可以添加新框并使用 javascript 重新绘制画布
- 谷歌地图多边形 - 添加新点后重新绘制
- 需要使用新数据重新绘制地图(与CartoDB.js结合使用)
- 使用单击功能绘制新的动态JS多边形
- HTML5 画布 - 使用剪辑擦除新圆圈后重新绘制新圆圈
- 使用数据表(Meteor Tabular)在新行中绘制数组的每个元素
- 将json中的数据合并到一个新的数组中,并使用d3.js绘制形状
- 如何加载新图像并将其绘制到画布上
- 使用阶梯将绘制的形状移动到新的Y
- 单击按钮打开一个新窗口,并用D3绘制多个大圆
- 谷歌地图v3方向渲染器重新绘制响应
- 删除以前的路线,并绘制一个新的路线
- 画布-只绘制时,悬停在新的瓷砖,而不是整个画布
- 如何将前一个函数的结果绘制到JavaScript中的新函数中
- 如何绘制画布到新的html页面
- 绘制新形状时删除DrawingManager形状