标签: rendering

如何将边缘渲染为圆柱体?

我已经加载了 OBJ 多面体,并使用 EdgesGeometry() 来提取其边缘:

var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial( {color: 0x000000}) );
Run Code Online (Sandbox Code Playgroud)

但我想将每个边缘渲染为具有可配置半径的圆柱体。像这样的东西:

边缘呈现为圆柱体的十二面体。

rendering edges three.js

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

React 中重新渲染和重新加载页面有什么区别?

我想了解除了重新渲染时是否有任何其他区别,它仅渲染更新的数据,而重新加载页面将完全发送新的 HTML。

rendering reactjs

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

CSS 如何阻止渲染?

我仍然无法非常清楚地理解“CSS 是渲染阻塞”这个概念。我确实非常了解 JS 是如何阻塞解析器的。但是,前者对我来说仍然有点不清楚。

让我们举个例子:

索引.html:

<!DOCTYPE html>
<html>
<head>
  <title>Some Document</title>
  <link href='cdn1.com/styles1.css' rel="stylesheet"/>
  <link href='cdn2.com/styles2.css' rel="stylesheet"/>
</head>
<body>
   ...
   ...
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

style1.css(来自 cdn1):

body { background: blue }
Run Code Online (Sandbox Code Playgroud)

style2.css(来自cdn2):

body { background: red }
Run Code Online (Sandbox Code Playgroud)

现在,我们假设来自 cdn1 的 style1.css 加载时间为1 秒,而来自 cdn2 的 style2 加载时间为500 毫秒。我想知道最终用户在以下时间线之间会在浏览器中看到发生的所有事情:

  1. 在时间T < 500ms 时:是否会出现 FOUC 或空白页面,因为 CSS 是渲染阻塞的,并且在我们拥有 styles1.css 文件之前不会构建渲染树
  2. 在时间500ms < T < 1sec 时:是否会出现红页(因为 style2.css 已加载)、FOUC 或由于第 1 点中提到的原因仍然是空白页。

另外,结果在每个浏览器(主要是 …

html css browser rendering google-chrome

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

将 UIView 内容渲染到 MTLTexture 中

我有一个(动画)UIView-Hierarchy,我想定期将 UIView 内容渲染到 MTLTexture 中以进行进一步处理。

我尝试过的是子类化我的父 UIView 和

override public class var layerClass: Swift.AnyClass {
  return CAMetalLayer.self
}
Run Code Online (Sandbox Code Playgroud)

但 nextDrawable() 的纹理是黑色的,不显示视图内容。

有什么想法如何获取包含视图内容的 MTLTexture 吗?

textures rendering uikit ios metal

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

反应条件渲染的最佳实践?

我有一个在切换按钮时应显示的 div/部分

{
  this.state.viewButtonClicked ?  <Solution solution= {this.state.activeSolution}/> : <React.Fragment/>
} 
Run Code Online (Sandbox Code Playgroud)

使用三元运算符适合于此吗?

在这种情况下,如果按钮为 false,则不显示某些内容的最佳做法是什么?

React.Fragment 可以吗?

基本上,如果 viewButtonClicked 为 false,我想返回/渲染 null。

rendering jsx conditional-statements reactjs

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

React 项目:Safari 似乎正在渲染,但没有绘制元素?

我正在渲染一个卡片列表,每个卡片显示一些数据以及三行,允许用户导航到该卡片的特定扩展部分。

由于某种原因,Safari 似乎为每张卡片渲染了三个导航行,但它们是白色且透明的。我知道它们已被渲染,因为我仍然可以单击该行所在的空间并且导航按预期工作。它只是看不见的。

使用 Chrome 时不会出现此问题。它只发生在 Safari 上:无论是在浏览器中的桌面上还是在 iOS 上运行 Safari 时。控制台中没有错误。

另一个奇怪的难题是,当我在 Safari 中检查元素时,它们出现在屏幕上!这是我拍摄的展示该行为的视频的链接。

有任何想法吗???

safari rendering mobile-safari reactjs

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

反应表格重新渲染,在表格单元格中输入文本时失去焦点

我有一个反应表如下:

我在下面显示的每个选项卡中都有一个表格(EN、CN、VN、TH)。目前,当我尝试在“消息”列(下表中的第三列)中输入文本时,每次输入字母表时,该表都会重新呈现。光标将失去焦点,我必须再次手动单击输入框才能继续输入。

在此输入图像描述

表.js

const [playerNotification, setPlayerNotification] = React.useState([
       {
            'language': 'vn',
            'notificationDetails': [
                {
                    'key': 'event',
                    'description': 'test event',
                    'message': ''
                },
                {
                    'key': 'event 2',
                    'description': 'test event 2',
                    'message': ''
                },
                {
                    'key': 'event 3',
                    'description': 'test event 3',
                    'message': ''
                }
            ]
        },
        {
            'language': 'cn',
            'notificationDetails': [
                {
                    'key': 'event',
                    'description': 'test event',
                    'message': ''
                },
                {
                    'key': 'event 2',
                    'description': 'test event 2',
                    'message': ''
                },
                {
                    'key': 'event 3',
                    'description': 'test event 3',
                    'message': …
Run Code Online (Sandbox Code Playgroud)

rendering input reactjs

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

React Native Flatlist numColumns 没有生成多个列

我刚刚开始学习 React Native,这是我的第一个项目 - 新闻应用程序。不过,我已经使用 React Native Flatlist 成功渲染了新闻的图像和描述。

\n

但是当我使用numColumns制作两列时,列号保持不变。但显示的图像数量变成了一半(即在我的例子中从 18 到 9)。而且图像的描述位于下一条新闻的图像下方,如下所示 -

\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n

我的源代码如下所示 -

\n
import React, { Component } from \'react\'\nimport { View, Text, FlatList, TouchableHighlight, SectionList, TouchableOpacity , Image,StyleSheet } from \'react-native\'\nimport { ScrollView } from \'react-native-gesture-handler\';\nimport { HomeNewsJSON } from "../../../../assects/JSON/Home"\n\nclass HomeNews extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      news: ""\n    };\n  }\n\n  componentDidMount() {\n    this.getInfo();\n  }\n\n  getInfo() {\n    var data = []\n    var jsondata = HomeNewsJSON["items"]\n …
Run Code Online (Sandbox Code Playgroud)

frontend listview rendering react-native react-native-flatlist

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

在 React JSX 功能组件中从数组中删除值时状态未更新

值通过复选框选择添加到数组中,该复选框工作正常并更新状态,但是当我从数组中删除值时,状态不会更新,但数组正在被修改

大批

  const [selectedKeys, setSelectedKeys] = React.useState([]);
Run Code Online (Sandbox Code Playgroud)

事件

 if (event.target.checked) {
               //adding values to array
      setSelectedKeys([...selectedKeys, event.target.value]);
    } else {
      var index = selectedKeys.indexOf(event.target.value);
      if (index >= -1) {
             //Removing values from array
        selectedKeys.splice(index, 1);
      }
      setSelectedKeys(selectedKeys);
    }
Run Code Online (Sandbox Code Playgroud)

arrays rendering jsx reactjs

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

DirectX - 何时使用实例化,何时不使用实例化?

我正在使用 directx 11 制作一个应用程序。我首先想利用实例化,因此为了简单起见,我组织了整个管道以始终使用实例化。这意味着目前如果我想在场景中绘制单个几何体,它仍然会经过实例渲染。

我的问题是实例化会带来什么开销?一般来说,这种方法是一种不好的做法吗?如果是这样,是否存在关于如何决定何时使用实例有益、何时不有益的规则?

一个类似的问题对我没有帮助:与实例渲染相关的开销是多少?

directx rendering geometry-instancing

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