내가 여기이 예제를 수정하려고 한 방법 시차

Question

에 대한 용기 또는 표면 내부에 이미지를 추가하는

https://github.com/Famous/examples/tree/master/src/examples/surfaces/ImageSurface

내 목표는 컨테이너의 어떤 종류의 자식 인 수정 아래의 이미지를 만들 수 있습니다. 그런 다음이 수정 자에 setTransform을 입력하여 이미지를 이동할 수 있습니다.

var Engine  = require("famous/core/Engine"); 
var ContainerSurface = require("famous/surfaces/ContainerSurface"); 
var Modifier  = require("famous/core/Modifier"); 
var ImageSurface = require("famous/surfaces/ImageSurface"); 

var mainCtx = Engine.createContext(); 

var image = new ImageSurface({ 
    size: [200, 200] 
}); 

var container = new ContainerSurface({ 
    size: [200, undefined], 
    properties:{ 
     backgroundColor: 'blue', 
     overflow: 'hidden' 
    } 
}); 

image.setContent("content/famous_symbol.svg"); 

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image); 

위의 코드는 왼쪽 상단에 로고가 파란색으로 표시되고 싶습니다. 그러나 지금까지는 이미지가 전혀 나타나지 않습니다.

어떤 도움이 필요합니까? UPDATE 1

:

container.add(new Modifier({origin: [0, 0]})).add(image); 
mainCtx.add(container); 

내가이 같은 일이 생각했기 때문에 좀 이상해 :

mainCtx.add(container).add(new Modifier({origin: [0, 0]})).add(image); 

수있는 사람

나는이 일을 실현 차이점을 말해 주시겠습니까?

Answer 1

중첩 수준의 차이. HTML 흐름에 대해 생각해보십시오. (하지만 그게 전부하지 여기 세드릭.) 원래

당신이이 일을했다 : 당신은 수정과 용기 내부의 이미지를 추가

container.add(new Modifier({origin: [0, 0]})).add(image); 
mainCtx.add(container); 

:

<mainCtx> 
    <container/> 
    <image/> 
</mainCtx> 

당신은 그것을 변경하는 경우 , 바로 아래에 반대.

<mainCtx> 
    <container> 
    <image/> 
    </container> 
</mainCtx> 

완벽한 예는 아니지만 여기에 무슨 일이 일어나는지 설명하기를 바랍니다.

편집 :

나는 예제 코드의 수정을 제거했습니다. 당신은 수정자가이 방식으로 작동하지 않는다는 점에서 옳습니다. 내 설명은 Renderables (루트 객체로 Surface가있는 객체)에만 해당했습니다.

수식어가 연결된 객체를 수정합니다. 문제는 수정 자와 같은 Renderables를 다루고 있다는 것입니다.

Answer 2

container이 이므로 원래 방법이 작동하지 않는 이유는 이라고하는 메서드입니다.

mainCtx.add(container);은 container을 포함하는 RenderNode를 반환하므로 mainCtx.add(container).add(...);을 입력하면 RenderNode.add이 호출됩니다. container.add(...)을 수행하면 RenderNode.add 대신 ContainerSurface.add이 호출됩니다. 같은 이름을 가진 두 가지 다른 메소드. ContainerSurface.add은 ContainerSurface 안에있는 새로운 Context에 추가합니다. ContainerSurface 안에 완전히 새로운 장면 그래프 트리가 있습니다.