标签: scale

用户在JavaScript中对页面进行缩放或双击以放大/缩小后,是否有人知道如何获取视口大小或缩放值？

我尝试过使用window.innerWidth,但结果好坏参半.有时它似乎准确地给出了视口显示的像素数,但是,如果我在页面上放大并然后进行大幅缩小以缩小,则window.innerWidth将大约为600-700,即使它只是显示约200px的页面.该页面只有400px宽,并且没有显示当您缩小到超出页面大小时看到的方格"你已经走得太远"背景.

如果我做小缩放放大和缩小,window.innerWidth似乎工作得很好.不幸的是我不能依赖用户只做小捏手势:)

我也尝试在手势事件对象上使用scale属性,但我发现它不可靠,因为当你重新加载页面或使用后退/前进按钮导航到它时,你并不总是知道初始比例使用元标记来指定它.

最终,我正在尝试创建一个知道用户何时尝试缩小超出最大缩放级别的应用程序,所以如果有另一种方法可以做到这一点,我有兴趣听到它:)

这是我用来获取innerWidth的代码:

document.body.addEventListener('gestureend', function (evt) {
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);

谢谢!

我如何在SDL中扩展精灵？

我有一组点,如:pointA(3302.34,9392.32),pointB(34322.32,11102.03)等.

我需要缩放它们,因此每个x和y坐标都在(0.0 - 1.0)范围内.我尝试通过首先找到数据集中的最大x值(maximum_x_value)和集合中的最大y值(minimum_y_value)来做到这一点.然后我做了以下事情:

pointA.x = (pointA.x - minimum_x_value) / (maximum_x_value - minimum_x_value)
pointA.y = (pointA.y - minimum_y_value) / (maximum_y_value - minimum_y_value)

这会改变相对距离(？),因此使数据无法用于我的目的.有没有办法缩放这些坐标,同时保持它们的相对距离完整？

我试图建立一系列悬停放大的缩略图.我的初步构建通过使用CSS3转换完成放大/缩放部分:缩放和轻松进入.问题是它们彼此重叠,因为它们共享一个z轴.

任何人都可以帮我创建一个javascript添加到这个场景,正确地将每个缩略图定位在一个有意义的z轴,即每个放大的图像调整大小在每个其他图像的顶部.

在我的网站上 演示:演示更新:已解决

代码预览:

HTML:

<div style="position: absolute;" class="item hover"> 
 <a href="#"><img alt="two" src="img/posts.png"></a> 
</div>

CSS:

#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}

#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}

脚本:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

因此,此页面使用此脚本切换hover_effect类,将div的比例增加到150%.

解: z-index:999 …

我正在尝试使用MATLAB/Octave创建一个简单的热图:
如您所见,我有很多行,每行都代表一个单独的类别.

我正在使用该imagesc功能,我希望能够缩放图像/绘图,以便可以正确打印每个y轴标签(而不是在下面的图像中可以看到的混乱).

这是我想要修改的示例代码:

A = randi(100, 200, 3);
imagesc(A, limit = [0, 100]);
set(gca, 'xtick', [1:3]);
set(gca, 'xticklabel', { "1,000", "2,000", "3,000" });
set(gca, 'ytick', [1:200]);

编辑:我附上解决所提出的问题,以达到多亏EitanT的建议以及有用的信息http://nibot-lab.livejournal.com/73290.html?nojs=1:

paperWidth = 16.5;
paperHeight = 11.7;

set(gcf, 'Position', get(0,'Screensize'));
set(gcf, 'PaperUnits', 'inches');
set(gcf, 'PaperSize', [paperHeight paperWidth]);
set(gcf, 'PaperPositionMode', 'manual');
set(gcf, 'PaperPosition', [0 0 paperWidth paperHeight]);
set(gcf, 'renderer', 'painters'); figure(gcf);

A = randi(100, 200, 3);
imagesc(A, limit = [0, 100]);
set(gca, 'FontSize', 5);
set(gca, 'FontWeight', 'light');
set(gca, 'xtick', [1:3]); …

使用案例

我正在尝试构建一个"幻灯片放映"类型的应用程序.每个载玻片有一个固定的纵横比,但我想的内容,以与它们的正常宽度/高度被渲染 - 所以我试图使用CSS3"变换:规模"在幻灯片的内容,使用所述视口宽度/高度我计算理想的比例/边距以使幻灯片适合视口.在一张特定的幻灯片上,我正在为人们展示一些"信息卡",并列出每个人的"接班人"

问题

Chrome在图片上显示出一些非常奇怪的行为.如果您调整窗口大小,图像会移动到整个地方.如果强制图像以某种方式重新绘制图像似乎自我修复(即向下滚动页面并向后滚动)

编辑这似乎与具有边框半径的框内的图像有关!

题

这是Chrome中的错误吗？有没有解决这个问题的工作？

现场例子

活小提琴

在此实例中 - 您可以调整结果窗格的大小以使图像缩放.至少在我的chrome版本中,图像变得混乱.

发布编辑

我把代码调低到了重现问题所需的最低限度.我只使用了webkit供应商前缀.

我还更新了问题描述,因为在摆弄代码之后我意识到它必须与包含图像的元素的边界半径有关!

原始小提琴

HTML

<div class="container">
    <div class="inner">
        <div class="box">
            <img src="https://en.gravatar.com/userimage/22632911/5cc74047e143f8c15493eff910fc3a51.jpeg"/>
        </div>
    </div>
</div>

CSS

body {
    background-color: black;
}

.inner {
    background-color: white;
    width: 800px;
    height: 600px;
    -webkit-transform-origin: 0 0;
}

.box {
    overflow: hidden;
    -webkit-border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 10px;
}

JAVASCRIPT

(function ($) {
    var $inner = $('.inner');
    var $window = $(window);
    var iWidth = parseInt($inner.css('width'));
    var iHeight = …

我正在使用transform: scale(0.666667); transform-origin: 25.7778% 0 0;css以便在我的项目中将页面适合任何类型的屏幕尺寸.之后我面对以下问题!当我双击输入电子邮件时出现在其他地方

我尝试使用ONLY vh尺寸创建登录表单.这样做,希望表单总体上可以根据视口进行缩放.

它没有!由于某种原因放大,创建一个空白区域,在输入字段和下面的文本之间放大得越大.

http://jsfiddle.net/TnY3L/

小提琴制作得不是很好,只是从我的项目中复制它.但你可以看到什么是错的 - 这才是最重要的.

任何人都知道如何解决这个问题？

<span id="loginform">
    <input type="text" name="login" class="LFORM" placeholder="USERNAME" />
    <input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
    <button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
    <a href="" id="CALINK" style="font-size:1.4vh;">Create account</a>
    <a href="" id="FLLINK" style="font-size:1.4vh;">Forgot login?</a>
</span>

::-webkit-input-placeholder {
     font-size: 1.4vh;
}
#loginform {
     float: right;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     right: 1.5vh;
}
#CALINK {
     float:left;
     font-family:my_fat_font;
}
#FLLINK {
     float:right;
     font-family:my_fat_font;
}
#LB {
     border-radius: 0.4vh;
     font-family: my_fat_font;
     color: #ffffff;
     background: #ff9f2d;
     padding: 0.2vh …

好的,我需要一些帮助......我有一个蓝牙体重秤.我可以将我的Raspberry Pi连接到这个规模并获得一些数据.但是我不容易在这个六角沙拉中读到我的价值观.

每次测量后,我得到两行信息,其中应包含我的值

(我模拟了所有的测量结果......第5个人就是我在手上按压我的手......人2 + 3是我在秤上穿袜子,所以如果你发现一些不切实际的价值,就不需要给我一些医疗建议:D )

比例:从5.0公斤开始(官方,但我可以看到4.9作为起点),最大180公斤(这可能只是一个安全注释.它是一个玻璃级),d = 100克

我从显示器中注意到的:

#  | Person | m kg| Fat % | TbW % | Mus % | Bone kg | kcal | BMI
1  |   5    |13,3 |   5   |  72,7 |  60,1 |   0,8   | 1056 | 13,3
2  |   3    |73,6 |  26,3 |  51,1 |  34,2 |   3,5   | 2428 | 24,3
3  |   2    |76,8 |  18,5 |  61,1 |  41,9 |   3,4   | 2741 | 24,8 …

我有一个包含数字和非数字列的数据框,比方说

df <- data.frame(v1=1:20,v2=1:20,v3=1:20,v4=letters[1:20],v5=letters[1:20])

要仅选择我将使用的非数字列

fixCol <- !sapply(df,is.numeric)

但现在我还想要包含一个特定的数字列,比如说v2.我的数据框非常大,列的顺序发生了变化,因此我无法使用数字对其进行索引,我真的想使用名称"v2".我试过了

fixCol$v2 = TRUE

但是这给了我警告In fixCol$FR = TRUE : Coercing LHS to a list,这使我无法将原始数据框子集化为仅获得fixCol

df[,fixCol]

得到: Error in .subset(x, j) : invalid subscript type 'list'

最后,我的目标是缩放我的数据框的所有数字列,除了这一个指定的列,使用类似的东西

scaleCol = !fixCol
df_scaled = cbind(df[,fixCol], sapply(df[,scaleCol],scale))

我该怎么做才能做到最好？