标签: repaint

数据属性的CSS不会刷新/重绘

在HTML5/JS应用程序中,我们有一些视图,其中包含一些样式,具体取决于data-attribute元素:

喜欢

<li data-level="0"></li>
Run Code Online (Sandbox Code Playgroud)

要么

<li data-level="1"></li>
Run Code Online (Sandbox Code Playgroud)

CSS

li[data-level^="1"] {
  /* some styles */
}
Run Code Online (Sandbox Code Playgroud)

这似乎无处不在page reload.

但是当通过JS以编程方式设置data-attribute时,CSS属性将在所有相关的桌面浏览器中呈现,但不会在移动Safari中呈现.

JS部分看起来像这样:

this.$el.attr('data-level', this.model.getLevel())
Run Code Online (Sandbox Code Playgroud)

关于如何强制应用这些属性的任何想法(刷新/重绘某些东西)?

我想避免使用class属性和不同的类,因为事情比这里显示的更复杂......

javascript css mobile-safari repaint custom-data-attribute

8
推荐指数
1
解决办法
2302
查看次数

IE10 JavaScript在计算机锁定时无法重新绘制窗口?

问题

在IE10上发生.(IE8工作正常.)

我编写了一些JavaScript代码,在20分钟不活动后,将浏览器重定向到另一个URL以指示用户已注销.通常这很好.但是我注意到一个奇怪的情况......如果用户的Windows计算机在此超时期间被锁定,那么看起来好像什么也没发生.

但是,当我查看浏览器的URL栏时,我可以清楚地看到该URL已经更新到自动注销页面.但是浏览器窗口的整个内容仍然显示旧页面!由于某种原因,浏览器窗口没有重新绘制/刷新.它看起来像是冻结了.

此时......如果我在页面上快速鼠标点击,则浏览器"醒来"并显示新内容.(似乎只有一次鼠标点击是不够的.你点击的速度越快,"唤醒"的速度就越快.)

理论

我最好的猜测是IE10浏览器在计算机锁定时停止重新绘制窗口.但是,我确实认为JavaScript引擎仍在运行,因为我在不同的时间间隔测试了另一个具有多个JS新Date()时间戳的场景,当屏幕最终重新绘制时,每个日期时间都是唯一的,显示实际发生的时间.

重新创建问题 - 版本1

  1. 在IE10中启动下面的JavaScript代码
  2. 在10秒钟之前锁定我的Windows计算机.
  3. 等待10秒钟,然后解锁我的电脑.
  4. 看到IE10窗口无法重绘.

我注意到这只发生在重定向到公司本地Intranet上的URL时.我不知道为什么会这样......但如果我有URL作为谷歌或雅虎的主页....那么我无法重新创建这个问题.它只是正常工作.让我想知道它是否可能是某种组策略/可信区域/内联网与互联网问题......

<!DOCTYPE HTML>
<html>
<head></head>
<body>    
<script>
    var url = 'http://IntranetWebApps.OurCompany.com/MyWebApp/Home';  // fails
    //url = 'http://www.yahoo.com';  // this 'Internet' site works
    //url = 'http://www.google.com';  // this 'Internet' site works 

    setTimeout(function () { 
            window.location.href = url;
        }, 10000  // wait 10 seconds, then execute redirect
    );
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

有没有人有任何想法如何解决这个问题,以便IE10窗口将永远重绘,而不是显示陈旧的内容?

javascript windows internet-explorer repaint internet-explorer-10

8
推荐指数
1
解决办法
1156
查看次数

Swing:无法让JButton更新 - repaint()无效

我第一次使用Swing来创建一个简单的GUI.它包含一个JFrame我放置了一个单独的JButton,当点击它时,调用一些其他代码,大约需要.3秒钟返回.

就在调用此代码之前actionPerformed(),我想更新按钮上的文本以通知用户正在进行处理.我的问题是,直到3秒钟的呼叫返回后,按钮上的文字才会更新.我希望在通话过程中出现更新的文本,然后我会将其更改回来.

当我点击按钮时,调用repaint()on JButton不会执行任何操作并在JFrame结果中调用它Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException.

java swing repaint swingworker

7
推荐指数
2
解决办法
8073
查看次数

如何同时更改控件而不重新绘制每个控件?

例如,我需要在运行时禁用两个按钮.在我禁用第一个按钮后,它会变成灰色,第二个 - 它也会变成灰色.但我不知道如何同时重新粉刷!

我需要这样的东西:

  1. 冻结表格(禁用重新绘制)
  2. 禁用第一个按钮
  3. 禁用第二个按钮
  4. 启用表单重新绘制

如何实现?

forms delphi repaint

7
推荐指数
2
解决办法
1万
查看次数

如何报告JavaScript函数的进度?

我有一个很长的JavaScript函数并执行许多任务,我想通过使用消息更新SPAN元素的内容来向用户报告进度.我尝试在整个功能代码中添加document.getElementById('spnProgress').innerText = ...语句.

但是,当函数执行时,UI将不会更新,因此您只能看到写入SPAN的最后一条消息,这不是很有用.

我目前的解决方案是将任务分解为多个函数,在每个函数结束时我设置SPAN消息,然后使用window.setTimeout调用以非常短的延迟(比如10ms)"触发"下一个函数.这产生控制并允许浏览器在开始下一步之前用更新的消息重新绘制SPAN.

但是我觉得这很乱,很难遵循代码,我认为必须有更好的方法.有没有人有什么建议?有没有办法强制SPAN重绘而不必离开函数的上下文?

谢谢

javascript progress repaint

7
推荐指数
1
解决办法
4123
查看次数

在程序之间切换时重新绘制问题

MyApp(.NET c#)由OtherApp(c ++)触发.

触发后,我的应用程序将占据整个屏幕并为用户提供两个选项.一个选项退出MyApp并返回到OtherApp主屏幕.第二个选项退出初始屏幕并显示另一个用户输入屏幕 - 输入后退出并返回到OtherApp.

有时候,OtherApp屏幕不会重新绘制(只能看到背景,而不能看到按钮) - 我不能轻易复制它(当我这样做时看起来像是侥幸),但我已经在很多应用程序上看到了它.

有没有办法MyApp可以强制屏幕重绘OtherApp?

可能是什么导致了这个?

澄清 - 其他应用程序不是我们的.我们的客户使用OtherApp.MyApp由filewatcher事件触发.当我们看到一个文件时,我们会处理它.如果这是我们要查找的文件,我们会为用户提供两个选项.OtherApp不知道MyApp存在.

.net c# c++ repaint

7
推荐指数
1
解决办法
1447
查看次数

如何修改Android视图?

我的视图中有一些方法可以修改调用时绘制的一些形状.在Java中,为了确保组件更新,我会打电话repaint().有什么东西能确保我的观点正确更新吗?

我读的地方,调用invalidate()onDraw()方法将让事情最新的,所以我不会需要有像repaint()在我的方法是修改形状的绘制.

这是正确的,还是我还有别的办法?

编辑

要添加一个示例,我在视图中调用的方法是:

public void setLineThickness(int thickness) {
    aLineThickness = thickness;

    if(aLineThicness > 1)
        //repaint();      - Okay in Java but not in Android

}
Run Code Online (Sandbox Code Playgroud)

android repaint invalidation ondraw

7
推荐指数
1
解决办法
2万
查看次数

如何立即调用Java GUI?(与Thread.sleep()冲突)

我正在制作游戏记忆,当你选择两张牌时,如果匹配你就得保留它们,否则你会把它们转回去.如果你记得你已经选择过的牌,你可以对接下来的两张牌进行更好的猜测.

repaint()遇到的问题涉及不立即重新粉刷的方法.

当我翻转第二张卡片时,无论结果如何,我都要显示两张卡片在放弃或翻转之前向右翻转.我是通过打电话来做的sleep().

当然,如果我repaint()将卡片正面向上翻转,等待一秒钟,然后repaint()再根据它们的值,有用的小Java只会重绘一次(我想念C!).

基本上我想在我之前强制调用更新sleep().我已经阅读了一些其他线程,基本上说最好的方法是创建两个线程来保持逻辑和图形分离,然后你可以使用sleep()你的逻辑并保持你的GUI更新,但我在第一学期CS课程的第一学期在高中时,我希望将其保持在课程的水平上(尽管我花了很多时间在夏季网上开发和编写C语言).

因为我知道StackOverflow上有用的人喜欢阅读代码,所以这是我在下面提到的程序的一部分.该类HitArea是Card对象,cards[]数组包含一定数量HitArea的.(我没有重命名HitArea该类).activeCard1并且activeCard2HitArea我用来跟踪用户的两个选择的实例,并且空白构造函数是保留的"不可见" HitArea,尽管我稍后会将其更改为null.最后,cards.flip()反转一个toggle布尔值,确定卡是否正面朝上.

public void respond(HitArea choice)
{
    if(choice.inGame)
    {
        if(activeCard1.value == 0 && activeCard1.value == 0)
            activeCard1 = choice;
        else if((!(activeCard1.value == 0) && activeCard2.value == 0) && (activeCard1.id != choice.id))
        {
            activeCard2 = choice;
            check();
        }

    }
}
public void check()
{
    update(); …
Run Code Online (Sandbox Code Playgroud)

java user-interface swingx repaint

7
推荐指数
1
解决办法
1706
查看次数

使用 CSS 过渡时如何防止重绘其他元素

我试图阻止浏览器重新绘制以提高使用 CSS 动画的大型单页应用程序的性能。

如果我有一个对其:hover { transform: scale(...) }有影响的元素,我可以通过使用will-change: transform和/或此处transform: translateZ(0)提到的防止重绘。

但是一旦我transition向该元素添加 a ,许多元素就会重新开始重新绘制。

这是一个演示代码笔和它的 gif在此处输入图片说明

唯一可以防止这种重绘的方法是将其他元素放在 DOM 顺序中的动画元素之前,或者将动画元素的 z-index 索引在其他元素之上。但是对于复杂的单页应用程序,我不想对任何只需要悬停过渡的元素的 z-index 进行微观管理。

任何其他想法或参考?我还没有transition在别处讨论过这个与s 相关的特定问题。

css repaint css-transforms css-animations

7
推荐指数
1
解决办法
1001
查看次数

带有 CSS 变量和 @keyframes 的 CSS 动画在 Safari 上未更新

我正在使用 CSS 变量制作动画,其中 CSS 变量值根据页面滚动而变化。然后将该变量用于具有关键帧的动画。

最初它只能在 Firefox 上正确更新。同时,我找到了一种方法让它在 Chrome 上也能工作,通过强制重新绘制,在这种情况下,将颜色从 #000 动画到 #001。

/* --scale is dynamic changed by JS */

@keyframes move {
    0% {
        transform: translateX(0) scale(var(--scale));
        color: #000;
    }
    100% {
        transform: translateX(33vw) scale(1.5);
        color: #001;
    }
}
Run Code Online (Sandbox Code Playgroud)

您可以在 codepen 上查看演示

css safari animation repaint

7
推荐指数
1
解决办法
2531
查看次数