Масштабирование KineticJS Stage с изменением размера браузера?
Недавно обнаружил KineticJS, когда я пытался преобразовать свои навыки Flash в HTML Canvas. Это чрезвычайно впечатляющий инструмент! Вопрос: Если я использую интерфейс, такой как Bootstrap, и у меня есть страница с несколькими элементами div, которые содержат холсты, сгенерированные KineticJS, могу ли я заставить эти холсты масштабироваться вместе со всем остальным на странице? Большое спасибо.
----- Из-за ограничения по количеству комментариев я отвечаю в ОП. ---------
Вы бы настроили его так, чтобы был максимальный размер, а затем масштабировали бы его, как при масштабировании браузера? Например, в Actionscript я сделал это, чтобы отследить размер браузера и масштабировать сцену:
stageListener.onResize = function():Void {
// Calculate % of total allowable change for each dimension
var percentWScale:Number = (Stage.width - minStageWSize)/stageWResizeRange;
var percentHScale:Number = (Stage.height - minStageHSize)/stageHResizeRange;
// Test to see if the stage size is in the rescale range
if ((Stage.width < maxStageWSize) || (Stage.height < maxStageHSize)) {
pfarm.stageChanged = true;
// Calculate the scale factor for each dimension, but don't go below the minimum
var percentHScale:Number = Math.max(minimumScale, Stage.width/1024);
var percentVScale:Number = Math.max(minimumScale, Stage.height/768);
//trace ("H Scale Factor: "+percentHScale+". V Scale factor: "+percentVScale);
// Determine which window dimension to use for scaling -
// Use the one which is the most scaled down from the maximum stage size.
var getScaleFrom:String = (percentHScale << percentVScale)? "hScale" : "vScale";
// Scale the object
if (getScaleFrom == "hScale") {
baseParent._width = projectContentXSize * percentHScale;
baseParent._height = projectContentYSize * percentHScale;
} else {
baseParent._width = projectContentXSize * percentVScale;
baseParent._height = projectContentYSize * percentVScale;
}
} // END RESIZE OF SCROLLPANE CONTENT
В интересах флеш-беженцев (таких как я), которые пересекают сложную границу в землю HTML5, не могли бы вы привести пример или 2?