Famous / famous

This repo is being deprecated. Please check out http://github.com/famous/engine
http://deprecated.famous.org
Mozilla Public License 2.0
6.26k stars 686 forks source link

origin doesn't work #625

Closed Qvatra closed 9 years ago

Qvatra commented 9 years ago

I have containerSurface with Imagesurface inside. I want to resize my container and to keep my image in the center. for this i using modifier align and origin. The problem is that origin doesn't work for some reason.

The code pen implementation is here: http://codepen.io/Qvatra/pen/MYOYpz

Is there any workaround?

michaelobriena commented 9 years ago

What browsers are you seeing this on?

Qvatra commented 9 years ago

on Crome.... IE and firefox give also wrong results: image not in a center even before i start modifying..

michaelobriena commented 9 years ago

This looks to not be an origin bug. I think there are two bugs at play, one our our end in ImageSurface and one on Firefox's end.

In your example, if you swapped the ImageSurface with

var img = new Surface({
    size: [true, undefined],
    content: 'adfadf',
    properties: {
        backgroundColor: 'yellow'
    }
});

everything will work as expected. We will look into the issues with ImageSurface

If you load your example in firefox, the first time you load the app, it behaves differently then every other time. It looks like they are doing some strange stuff but we will look into this once we solve to bug in ImageSurface to ensure it is not our fault.

MylesBorins commented 9 years ago

@michaelobriena any movement on this?

neeharik commented 9 years ago

The translation when scaling happens when the order of the transforms is reversed. So this can be a workaround, try it in your codepen link:

var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var ImageSurface = famous.surfaces.ImageSurface;
var ContainerSurface = famous.surfaces.ContainerSurface;
var View = famous.core.View;
var Entity = famous.core.Entity;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var Transitionable = famous.transitions.Transitionable;
var TransitionableTransform = famous.transitions.TransitionableTransform;
var Easing = famous.transitions.Easing;
var Scrollview = famous.views.Scrollview;

var togle = false;

var mainCtx = Engine.createContext();
//mainCtx.setPerspective(1000);

var mainNode = new View({
  //size:[200,200]
});
var rootModifier1 = new StateModifier({
  size:[200,200],
  align: [0.88, 0.5],  
  origin: [0.5, 0.5]
})

var rootModifier2 = new StateModifier({
  size:[200,200],
  align: [0.5, 0.5],  
  origin: [0.5, 0.5]
})
var cont = new ContainerSurface({
    properties: {background: 'red'}
});
var mod = new StateModifier({
  align: [0.5, 0.5],  
  origin: [0.5, 0.5]
});
var img = new ImageSurface({
  //content: 'http://www.clker.com/cliparts/N/V/c/R/f/z/glossy-black-circle-button-th.png',
  //content: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ23Gzmb4KjWL2CxZXM81lySS4YTdK0rYgj7AToJqK2KuJR8K6U',
  content: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbGYiXmH4bP2zLiyn8HGufqQWaUX4f_TGgntNvgSYuNi8fd9SRX27CAzpp',
  //size: [undefined, true],
  size: [true, undefined]
});
cont.add(mod).add(rootModifier1).add(img);

mainNode.add(rootModifier2).add(cont);
mainCtx.add(mainNode);

Engine.on('click', function(){
  if(!togle){
    rootModifier1.setSize([40,40], {duration: 1000});
    rootModifier2.setSize([40,40], {duration: 1000});
  } else {
    rootModifier1.setSize([200,200], {duration: 1000});
    rootModifier2.setSize([200,200], {duration: 1000});
  }
  togle = !togle;
})
Qvatra commented 9 years ago

well this could be a workaround only if you already know your img size. In my case imgs are loaded dynamically so your align: [0.88, 0.5] would be every time different. Try other images that are commented. However I think your code could be modified to using align: [0.5, 0.88] if imgW>imgH. I will try

UPDATE: here codepen version: http://codepen.io/Qvatra/pen/LEeejK?editors=001 It can not be used as general workaround as it also dependent on container proportion in this case it's 200 / 200 = 1

neeharik commented 9 years ago

The workaround was only to maintain the alignment defined, which in the previous case was changing with size.

michaelobriena commented 9 years ago

I have not had time to really look into this fully. You can try

var img = new Surface({
    size: [true, undefined],
    content: '<img src=' + myImgSourceURL + /'>',
});

Which may work. The other thing you can try is

var myImgEl = document.createElement('img');
myImgEl.onload = function() {
  mySurface.setContent(myImgEl)
};

myImgEl.src = <url>
MylesBorins commented 9 years ago

We are no longer actively maintaining this repo and as such we will not be fixing this.

Thanks you for taking the time to discuss the issue, we hope you will bring the same drive an spirit to the famous engine, which can be found at --> http://github.com/famous/engine