Javascript Dynamics.js自动在用户操作上重新绘制画布_Javascript_Jquery_Canvas_Html5 Canvas_Kineticjs

Javascript Dynamics.js自动在用户操作上重新绘制画布

javascript jquery canvas html5-canvas

Javascript Dynamics.js自动在用户操作上重新绘制画布,javascript,jquery,canvas,html5-canvas,kineticjs,Javascript,Jquery,Canvas,Html5 Canvas,Kineticjs,我正在使用Kinetics.js操作canvas和jQuery来处理用户操作。所以当我一个接一个地使用它们时，所有的函数都工作得非常好。但当我尝试为一个事件（如$（'.selections img'）组合两个函数时，单击……。（见下文）该函数只设置背景并忽略文本。不过，文本层已经创建，但由于某些原因，我无法看到它。我试图改变函数调用的顺序，但运气不好当我检查console时，没有错误或警报，当我使用console.log检查变量时，所有变量都会打印到console 这里可能有什么问题注：此处

我正在使用Kinetics.js操作canvas和jQuery来处理用户操作。所以当我一个接一个地使用它们时，所有的函数都工作得非常好。但当我尝试为一个事件（如$（'.selections img'）组合两个函数时，单击……。（见下文）该函数只设置背景并忽略文本。不过，文本层已经创建，但由于某些原因，我无法看到它。我试图改变函数调用的顺序，但运气不好

当我检查console时，没有错误或警报，当我使用console.log检查变量时，所有变量都会打印到console

这里可能有什么问题

注：此处的目标是保存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

所以

将这些变量设置为全局变量或
在需要或需要的地方传递它们
在需要时创建它们

更好的资源方法是在层中销毁children（），而不是销毁层本身：

     background.destroyChildren();

    textLayer.destroyChildren();

此外，还将图像路径存储在img的alt属性中

这是对残疾观众的不尊重，他们需要这些属性来帮助他们理解图像

下面是代码和小提琴：


原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：234px；
高度：234px；
}
$（函数（）{
var hiddenCanvas=新的动力学阶段({
容器：'容器'，
宽度：234，
身高：234
});
var background=新的动能层（）；
添加（背景）；
var textLayer=新的dynamic.Layer（）；
添加（textLayer）；
功能背景（图）{
var imageObj=新图像（）；
imageObj.onload=函数（）{
var backImg=新的动力学图像({
x:0,，
y:0，
图片：imageObj，
宽度：234，
身高：234
});
背景。破坏儿童（）；
背景。添加（backImg）；
background.draw（）；
};
imageObj.src=图像；
}
函数setText（txt）{
var text=新的dynamic.text({
x:20，
y:50，
文本：txt，
尺寸：36，
fontFamily：“Calibri”，
填写：“#555”，
对齐：“居中”
});
textLayer.children（）；
textLayer.add（文本）；
textLayer.draw（）；
}
/*处理画布的图像选择和背景设置*/
$（'.imgs'）。单击（函数（e）{
img=$（this.attr（'src'）；
退避地（img）；
});
/*处理文本输入字段和文本打印到画布*/
$（“#打印”）。单击（函数（e）{
t=$（'quoteInput'）.val（）；
setText（t）；
});
}); // end$（函数（）{}）；
正文

哇，回答得很好。这很好用。谢谢你的时间和努力。谢谢你，朋友。

<!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>