배경이없는 kineticjs 레이어 만들기

Question

현재 변수에서 이미지를 받아서 캔버스에로드하는 자바 스크립트가 있습니다. canvas는 kineticj를 사용하기 위해 div 안에 있습니다. 나는 다음과 같은 코드로 정육각형을로드 해요 :로드 할 때 나는 모양은 이미지보다 위로 할 때

function MakeShape() 
    { 
    var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 490, 
    height: 225 
    }); 
    var polyLayer = new Kinetic.Layer(); 

var hexagon = new Kinetic.RegularPolygon({ 
    x: stage.width()/2, 
    y: stage.height()/2, 
    sides: 6, 
    radius: 70, 
    fill: 'red', 
    offset: { 
     x: 100, 
     y: 0 
    }, 
    draggable: true 
    }); 

    polyLayer.add(hexagon); 
    stage.add(polyLayer); 
    } 

그러나, 레이어는 캔버스의 배경을 받는다. 모양뿐만 아니라 레이어에 이미지를 그려야합니까? 이미지가 모양보다 먼저로드 될 때 어떻게해야합니까? 감사.

Answer 1

"javascript가 변수에서 이미지를 받아서 캔버스에로드하는 것이 무슨 뜻인지 확실하지 않습니다." 캔버스 요소에 배경 이미지 == 이미지가 할당되어 있다고 생각합니다.

어쨌든 new Kinetic.Stage 더하기 new Kinetic.Layer은 container 요소를 다루는 새로운 캔버스를 만듭니다. 따라서 Div와 Canvas에 넣은 이미지는 KineticJS가 만드는 새로운 Canvas에 의해 겹쳐집니다.

하단 ... 예, 레이어에 이미지를 그려야하고 (new Kinetic.Image 사용) 이미지로 Canvas 요소가 제거됩니다.

프로젝트가 성공적으로 완료되었습니다.

[예 라이트 코드]

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

 
var hexagon,image1; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg"; 
 
function start(){ 
 

 
    // add the image first 
 
    // It's z-index will be lower then the hexagon's z-index 
 
    // so the hexagon will be drawn over the image 
 
    image1=new Kinetic.Image({ 
 
    x:0, 
 
    y:0, 
 
    image:img, 
 
    }); 
 
    polyLayer.add(image1); 
 
    
 
    hexagon = new Kinetic.RegularPolygon({ 
 
    x: stage.width()/2, 
 
    y: stage.height()/2, 
 
    sides: 6, 
 
    radius: 70, 
 
    fill: 'red', 
 
    offset: { 
 
     x: 100, 
 
     y: 0 
 
    }, 
 
    draggable: true 
 
    }); 
 
    polyLayer.add(hexagon); 
 

 

 

 
    polyLayer.draw(); 
 

 
}

body{padding:20px;} 
 
#container{ 
 
    border:solid 1px #ccc; 
 
    margin-top: 10px; 
 
    width:490px; 
 
    height:225px; 
 
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script> 
 
<h4>Background image with draggable hex on top.</h4> 
 
<div id="container"></div>