标签: sprite

是否可以将CSS精灵用于"前景"图像 - 即用户应该点击并与之交互甚至打印的图像？

而不是使用CSS background-image属性.你会用什么？

我是新手,并尝试使用OpenGL ES在我的iPhone屏幕上显示精灵.我知道使用cocos2d更简单,更容易,但现在我正在尝试直接在OpenGL上编码.是否有任何简单而有效的方法来加载和显示OpenGL ES中的精灵.到目前为止我发现的东西要复杂得多.:(

我有一个图像(588x449)精灵与一组不同的团队徽标.在Android中,我有相应的ImageView显示:

        <ImageView android:id="@+id/image_team_logo" 
            android:src="@drawable/teamheaderssprite" 
            android:layout_height="25dp" 
            android:layout_marginLeft="5dp" 
            android:layout_marginTop="10dp" 
            android:layout_width="296dp" android:scaleType="matrix"/>   

以上内容将在左上角正确显示我的图像.我的问题是我希望能够移动显示图像中的位置,这样我就可以跳转到精灵中的另一个区域.这在html/css中很常见,我只是没有在android xml中看到'position'类型属性.

正如SpriteMethodTest所说,绘制精灵的方法有很多种.首先,我尝试了帆布,并有一些性能问题.比我决定学习opengl.我使用GL11Ext扩展我的第一个成就.但是你知道默认情况下,当你绘制纹理时,它们被翻转,而x和y轴在设备屏幕的左下角(横向模式)为零,而不像画布,你不能旋转精灵.

比我试图用GLU看看影响这个轴视图.但没效果.

比我想旋转我的精灵并且没有像他们说的那样影响GL11Ext的原因.

所以我现在有主要的stackoverflow条件,基本问题是:

1.使用哪种方法来实现对精灵的变焦,旋转和弹奏效果以及在旧的SWEET方式中查看X和Y轴[(0,0)在风景模式中的左上方]？

2.在宇宙中,有哪些类似于SPRING类的例子只使用了一种良好的SPRING RENDERING方式？(SpriteMethodTest让我很困惑)

我正在使用background-imageSVG精灵,在我的Safari,移动版Safari,Chrome,Firefox,Opera,IE等版本上,一切看起来都不错.但是,我的一些同事的背景位置无法正确显示一个较新版本的Chrome(我知道其中一个在Mac上使用的是版本35.0.1916.153,有些在Windows上使用了不同的新版本).

这是我在所有浏览器版本中的样子:

以下是一些较新版本Chrome的外观:

HTML:

<span class="icon icon--chat"></span>

CSS:

.icon{
    background:url(data:image/svg+xml;base64,[data]);
    font-family:sans-serif;
    background-position:top left;
    background-size:cover;
    display:inline-block;
    width:100px;
    height:100px;
    padding:0;
    margin:15px;
    cursor:default;
}

.icon--chat{
    background-position:0 4%;
}

当我把它放在JsFiddle和Codepen上时,完全相同的代码在我的同事的浏览器中正常工作,但无论如何它在这里:http://jsfiddle.net/HgR2N/

以下是我尝试过的一些没有解决问题的方法:

• 将背景图像从数据URI编码的SVG更改为常规的.svg文件
• 使用像素background-position代替百分比
• 添加font-family:sans-serif;(我读到某处可能会修复它 - 不知道)
• 去掉边距box-sizing:border-box;等

如果您对可能导致此问题的原因以及如何解决问题有任何疑问,请与我们联系 - 谢谢!

更新:我将我的Chrome更新到版本35.0.1916.153,所以现在我的同事和我正在使用完全相同版本的Chrome for mac,而她的混乱,我的仍然很好......

你能解释一下纹理和精灵之间的区别吗？当我们放大精灵时,它看起来很模糊,因为它基本上是一个图像.纹理是否相同？

我在下面的图片上看到了这条评论:

背景图层是纹理而不是精灵.

谁能解释一下？

我正在使用react-three-renderer(npm,github)来构建一个包含three.js的场景.

我正在尝试使用<sprite>并<spriteMaterial>制作一个始终面向相机的标签,就像在stemkoski的例子中一样.

但是,我无法显示标签并正确设置其坐标.我在Sprite-Label-Test上有一个最低限度可验证的完整示例.下载,运行npm install并打开_dev/public/home.html.

我的目标是看到文字显示在我期望的地方,但正如你所看到的,它只是黑色.为了证明精灵在相机的视野中,我把一个盒子放在同一个位置.要查看它从render方法中取消注释并重新gulp.

这是我的档案.它有两个主要组件,componentDidMount即为sprite创建文本的render方法,以及方法.

var React = require('react');
var React3 = require('react-three-renderer');
var THREE = require('three');
var ReactDOM = require('react-dom');

class Simple extends React.Component {
  constructor(props, context) {
    super(props, context);

    // construct the position vector here, because if we use 'new' within render,
    // React will think that things have changed when they have not.
    this.cameraPosition = new …

我有一个带有动画图标的网站,当你将鼠标悬停在它们上面时(当它们不是时,我选择一个非动画图标进入精灵),它们是动画.gif,这里是:

但我认为这可能会导致浏览器性能不佳.我可以在精灵中放置动画图标,在另一个中放置动画图标,但重点是什么？以这种方式精灵停止有用.您是否建议使用一个脚本来为精灵中放置的图标设置动画？也许？你有什么建议？我需要一个良好的浏览器性能

在three.js中,当鼠标被缩放时,文本将被放大并相应地减小.

var texture = new THREE.Texture( canvas );
var material = new THREE.SpriteMaterial ( { map: texture, transparent:false } );
var sprite = new THREE.Sprite( material );

当鼠标缩放时,如何防止文本大小发生变化？

有没有办法配置Compass,以便它不会在每次更改非精灵文件时重新编译或检查我的精灵？

我正在尝试对文件进行编辑,lists.scss但是我必须等待指南针在罗盘覆盖我的lists.css文件之前检查(我相信它的检查,可能是它的编译)一个精灵文件(多次).等待指南针检查这些精灵是我们团队耗费大量时间.

 ?  proj2 git:(tU8N) ? compass watch
 >>> Compass is polling for changes. Press Ctrl-C to Stop.
 >>> Change detected at 21:52:39 to: lists.scss
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
     error static/sass/application.scss (Line 354 of static/sass/lists.scss: Invalid CSS after "": expected selector, was "")
 overwrite application.css
     error static/sass/lists.scss (Line 354: Invalid CSS after "": expected selector, was "")
 overwrite lists.css
 >>> Change detected at 21:52:48 to: lists.scss
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
 unchanged static/images/sprite-icon-s18bb1f8a7d.png
 unchanged static/images/sprite-icon-s18bb1f8a7d.png …