标签: material

通过材料上的透明PNG显示背景颜色?

我正在使用一个案例构建器THREE.js,基础知识是我希望能够更改height/width/length盒子,旋转它,还可以更改盒子的背景颜色.

这是迄今为止:http: //design365hosting.co.uk/casebuilder3D/

尺寸更改的工作方式,以及框的拖动,现在我正在使用背景颜色更改.

我希望它的工作方式是使用透明的PNG作为框的面,并设置背景颜色,以便通过透明的PNG显示此背景颜色.

这就是我目前正在做的事情:

var texture = THREE.ImageUtils.loadTexture("images/crate.png");
materials.push(new THREE.MeshBasicMaterial({color:0xFF0000, map: texture}));
Run Code Online (Sandbox Code Playgroud)

你可以看到我将材质设置为背景颜色为红色并覆盖透明PNG,问题是,three.js似乎忽略了背景颜色,只显示透明PNG,意味着没有透过颜色显示.

预期结果应该是带有重叠PNG的红色框.

希望有道理,任何人都可以帮忙吗?

png overlay transparent material three.js

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

我自己的角度材料风格ui

material-ui我想定制它.不幸的是,我自己的风格被框架样式覆盖了.例如,当我为md-toolbar声明样式时

md-toolbar {
    background: red;
}
Run Code Online (Sandbox Code Playgroud)

该声明被材料覆盖.我添加了!important指令,它有所帮助,但我不想在任何地方使用它.我该如何以适当的方式定制材料?

material angularjs

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

SceneKit,SCNMaterial的翻转方向

对SceneKit来说非常新,所以只需在这里寻求帮助:

我有一个SCNSphere,它的中心有一个摄像头

我创建了一个SCNMaterial,doubleSided,并将其分配给球体

由于相机位于中央,因此图像看起来垂直翻转,当内部文本完全混乱时.

那么如何翻转素材或图像(虽然后来它将是视频中的帧),欢迎任何其他建议.

这个解决方案顺便说一下,我失败了,normalImage作为一种材料应用(但是从球体内部看时图像被翻转),但是分配flippedImage结果没有任何材料(白色屏幕)

    let normalImage = UIImage(named: "text2.png")
    let ciimage = CIImage(CGImage: normalImage!.CGImage!)
    let flippeCIImage = ciimage.imageByApplyingTransform(CGAffineTransformMakeScale(-1, 1))
    let flippedImage = UIImage(CIImage: flippeCIImage, scale: 1.0, orientation: .Left)

    sceneMaterial.diffuse.contents = flippedImage
    sceneMaterial.specular.contents = UIColor.whiteColor()
    sceneMaterial.doubleSided = true
    sceneMaterial.shininess = 0.5
Run Code Online (Sandbox Code Playgroud)

uiimage material ios ciimage scenekit

7
推荐指数
3
解决办法
4070
查看次数

三个JS虚线材料未显示

我正在尝试用虚线图案创建线条,但不知何故,材料没有反映在我正在创建的线上,我只是看不出我在这里做错了什么...

我正在使用示例中的代码,它应该产生以下代码:

在此输入图像描述

当我采用以下代码时:

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0,0,0));
geometry.vertices.push(new THREE.Vector3(100,0,0));

var material = new THREE.LineDashedMaterial({ color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 });

var mesh = new THREE.Line(geometry, material);
scene.add(mesh);
Run Code Online (Sandbox Code Playgroud)

这就是我得到的:

在此输入图像描述

任何提示将不胜感激!

line material three.js

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

Angular2 +材质:mat-toolbar在mat-sidenav-container上没有阴影,尽管mat-elevation-z*

试图模仿材质指南的外观,我无法将工具栏的阴影渲染到mat-sidenav-container元素的顶部:

看到HTML代码,它不能更简单.我错过了什么?谢谢...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary">
  toolbar
</mat-toolbar>

<mat-sidenav-container >

  <!-- Side menu -->
  <mat-sidenav mode="side" opened="true">

    <h3>Menu 1</h3>
    <ul>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/">dashboard</a>
      </li>

      <!-- Home (aka dashboard) -->
      <li>
        <a routerLink="/resolutions">resolutions</a>
      </li>
    </ul>

    <!-- List resolutions -->
    <h3>Menu 2</h3>
    <ul>
      <li>
        <a>incentive</a>
      </li>
    </ul>

  </mat-sidenav>

  <!-- Routed contents -->
  <div class="contents">
    <router-outlet></router-outlet>
  </div>

</mat-sidenav-container>
Run Code Online (Sandbox Code Playgroud)

material material-design angular

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

在Scroll Flutter上隐藏Appbar?

Whatsapp主屏幕

考虑这个图像.你可以看到它有一个appbar,appbar有Tabbed按钮.我试图为appbar设置动画,使其隐藏在scrollup上,只留下Tab Buttons显示并滚动显示appbar apears.请帮帮我.对不起英语不好而不是美国人我也不是英语

android material dart material-ui flutter

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

如何在角形材质中显示图标选择&lt;mat-option&gt;并选择相同的选项

如何使用材质选择控件在选择下拉控件内正确显示图标。选择了垫选项后,其选择图标的文字以及如何克服这个问题?

            <mat-form-field>
                <mat-select formControlName="genderFormControl" placeholder="Gender">
                    <mat-option>None</mat-option>
                    <mat-option *ngFor="let gender of genders" [value]="gender.value">
                            <mat-icon matListIcon>pregnant_woman</mat-icon>
                            {{gender.name}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明


在此处输入图片说明

material angular-material2 angular

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

材质用户界面-带有复选框的扩展面板

我正在使用Material-UI进行UI设计。我正在使用集成了复选框的扩展面板。

请找到以下代码,

<ExpansionPanel 
    expanded={expanded === item.description} 
    onChange={this.handleChange(item.description)}
>
    <ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
        <Grid item xs={1}>
            <Checkbox
                value="checkedB"
                color="primary"
            />
        </Grid>
        <Grid item xs={2}>
            <Typography className={classes.heading}>
                {item.description}
            </Typography>
        </Grid>
        <Typography className={classes.desc}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
        </Typography>
    </ExpansionPanelSummary>
    <ExpansionPanelDetails>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Suspendisse malesuada lacus ex,
        sit amet blandit leo lobortis eget.
    </ExpansionPanelDetails>
</ExpansionPanel>
Run Code Online (Sandbox Code Playgroud)

但是我面临一个问题,当我选中或取消选中复选框时,扩展面板会扩展或折叠。由于该复选框,我想避免在扩展面板上执行任何操作。我该如何实现?

提前致谢。

material reactjs material-ui react-material

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

隐藏列Mat-Table Angular

我正在使用垫子桌子,我需要使其具有响应性,当用户通过手机访问时,七个列仅显示给我三个,有人可以指导我吗?

我尝试使用fxHide,但没有成功。

.button-raised {
  width: 60px;
  height: 30px;
  font-size: 12px;
  min-width: 0px; 
  line-height: 0px; 
  padding: 0 0px;
}
.rdesp-status mat-icon {margin: 4px;}
.mat-table {
  overflow: auto;
  max-height: 500px;
}
Run Code Online (Sandbox Code Playgroud)
      <mat-table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">

        <ng-container class="internalId" matColumnDef="internalId">
          <mat-header-cell *matHeaderCellDef  fxHide  fxShow.gt-sm >Nº RDESP</mat-header-cell>
          <mat-cell *matCellDef="let element" fxHide  fxShow.gt-sm  >
            <p class="text-grey" matTooltip="{{element.internalId}}">{{element.number}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="alias" matColumnDef="alias">
          <mat-header-cell *matHeaderCellDef>Apelido</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.alias}}</p>
          </mat-cell>
        </ng-container>

        <ng-container class="containerName" matColumnDef="name">
          <mat-header-cell *matHeaderCellDef>Nome</mat-header-cell>
          <mat-cell *matCellDef="let element">
            <span class="mobile-label">Nome</span>
            <p class="text-truncate" matTooltip="{{element.alias}}">{{element.name}}</p>
          </mat-cell>
        </ng-container> …
Run Code Online (Sandbox Code Playgroud)

material angular angular6

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

垫形场内的角材料垫-滑动-切换

如果我在mat-form-field内有一个mat-slide-toggle,则会收到错误消息:

错误:mat-form-field必须包含MatFormFieldControl

我希望在mat-form-field内切换mat-slide,以便获得样式。任何想法为什么我会收到此错误?是mat-slide-toggle不是mat-form-field吗???

这是我目前拥有的一个示例:

<mat-form-field fxFlexFill *ngSwitchCase="'mat-slide-toggle'">
    <mat-slide-toggle>{{el.text}}</mat-slide-toggle>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

material angular

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