Question

我正在将图像导入到一个组中，但是当我尝试稍后调整它们时，我没有得到任何响应（调整组的大小对图像没有影响）。图像编写如下：

var myBGgroup1 = new Kinetic.Group({
    x: Math.round((stage.getWidth()/12)*2),
    y: 0,
    id: 'BGimg1'
});         
//add image:
var imageObjBG1 = new Image();
imageObjBG1.onload = function() {
    var graphicBG1 = new Kinetic.Image({
        x: 0,
        y: 0,
        Image: imageObjBG1,
        width: bgW,
        height: bgH
    });
    myBGgroup1.add(graphicBG1);
};
//add image again, above it, for retiling:
var imageObjBG1b = new Image();
imageObjBG1b.onload = function() {
    var graphicBG1b = new Kinetic.Image({
        x: 0,
        y: -bgH,
        Image: imageObjBG1b,
        width: bgW,
        height: bgH
    });
    myBGgroup1.add(graphicBG1b);
};
imageObjBG1.src = imageObjBG1b.src = 'Content/images/buttons/canvas2_bgDots1.svg'

我尝试了setWidth和setHeight，并尝试了setScale，指的是＆＃39; graphicBG1＆＃39;或者＆＃39; imageObjBG1＆＃39; - 无济于事。我应该使用路径，例如，myBGgroup1.graphicBG1＆＃39;还是什么？

Answer 1

代码中的拼写错误会阻止处理：

image: imageObjBG1,    // Not capital "Image"

正如@Ani所说，你没有提供足够的代码供我们帮助。

您描述的“无变化”症状的典型原因：

调整对象大小后，您可能无法layer.draw()。

如果您没有更多代码，下面的示例将创建并调整KineticJS图像的大小。

这是代码和小提琴：http://jsfiddle.net/m1erickson/TedxV/

<!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.7.0.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    var kImage1,kImage2;


    var group=new Kinetic.Group({
        x:0,
        y:0,
        id:"group1"
    });
    layer.add(group);


    var img=new Image();
    img.onload=function(){
        kImage1=kImage(0,0,img);
        kImage2=kImage(0,-img.height,img);
        layer.draw();
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BrickWall.jpg";


    function kImage(x,y,theImage){
        var image=new Kinetic.Image({
            x:x,
            y:y,
            image: theImage,
            width: theImage.width,
            height: theImage.height
        });
        group.add(image);
        return(image);
    }


    $("#smaller").click(function(){
        kImage1.setWidth(kImage1.getWidth()*.9);
        kImage1.setHeight(kImage1.getHeight()*.9); 
        layer.draw();  
    });
    $("#larger").click(function(){
        kImage1.setWidth(kImage1.getWidth()*1.1);
        kImage1.setHeight(kImage1.getHeight()*1.1); 
        layer.draw();  
    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="smaller">Smaller</button>
    <button id="larger">Larger</button>
    <div id="container"></div>
</body>
</html>

kineticJS无法调整组内图像的大小

1 个答案: