Krpano 雪碧图处理工具,切图生成样式xml / A krpano-xml style processor for sprity
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

readme.md

Krpano 精灵图(雪碧图 || sprites)完美解决方案

做过全景开发的同学肯定都知道Krpano这个强大的全景引擎,目前可以说是最好的全景引擎之一, 不仅可以显示全景图片/视频,还能进行各种交互,还有 WebVR 模式、健全的工具体系等等。

krpano 为了兼容 HTML5 和 Flash,搞了一套自己的 krpano-xml 脚本语言,用这个来编写界面。

这边文章要讨论的问题就是,如何优雅的在 krpano-xml 中使用精灵图(雪碧图 || sprites).

做全景播放器的时候,我们们通常会用到各种各样的图标,播放暂停啊,全屏VR啊什么的,如果每个图标都用单张图片来引入的话,势必会产生非常多的HTTP请求,而我们知道,过多的HTTP请求是页面性能的大杀器,还好 Krpano-xml 的 layer 提供了 crop 属性给我们,这个属性可以让我们对图片进行切割,只显示切割出来的区域,和 CSS 精灵图使用 background-image 和 background-position 来进行图片显示的方式非常类似。下面是 krpano crop 属性示例:

<layer 
	name="some-image-layer"
	url="/foo/bar/image.png"
	crop="0|0|64|64"
	/>

上述代码的意思就是,从 x=0 y=0 坐标开始,截取图片的64x64宽高的区域来显示。所以,显示图片不同区域范围的代码就可以像下面这样:

<layer 
	name="some-image-layer"
	url="/foo/bar/image.png"
	crop="0|0|64|64"
	/>

<layer 
	name="other-image-layer"
	url="/foo/bar/image.png"
	crop="0|64|64|64"
	/>

现在我们有了 krpano 精灵图的使用方法,但是当你有很多张图片的时候,手动管理这些坐标点的位置是一件非常非常非常麻烦的事情。

CSS 精灵图已经有各种成熟的解决方案,比如博主喜欢的 gulp 插件 sprity ,它可以一键拼合零碎图片,并且生成 CSS/LESS/SASS 代码,可惜 krpano-xml 相对来说太小众了,我找遍 google 并没有找到一个好的解决方案,所以是时候造个轮子了😁

sprity-krpano-xml 是一个基于 sprity 的krpano-xml style 样式生成器。一键解决 krpano 精灵图部署问题。

https://github.com/JailBreakC/sprity-krpano-xml

强烈建议先阅读 sprity 的官方文档

sprity-krpano-xml 中文文档

NPM version Build Status Dependencies

一个基于 sprity 的 krpano-xml style 样式生成器

依赖

安装

Install with npm

npm install sprity sprity-krpano-xml --save-dev

全局使用 sprity-krpano-xml 请将 spritysprity-krpano-xml 一起全局安装

npm install sprity sprity-krpano-xml -g

示例

JavaScript:

var sprite = require('sprity');
sprite.create({
  ...
  style: 'style.xml',
  processor: 'krpano-xml'
  cssPath: './images/dist/',
  ...
}, function () {
  console.log('done');
});

命令行:

sprity out/ src/*.png -s style.xml -p krpano-xml

执行过之后,会生成一个合成好的雪碧图,和一个 style.xml 里面是 krpano-xml格式的 style 代码。

引入 style.xml 配合 style name 就可以吧雪碧图轻松的应用到 layer 上面。

例:

<!-- the generated xml file (sprite.xml) -->
<include url="sprite.xml" /> 

<!-- camera icon (camera.png in src directory) -->
<layer 
	name="the-camera-layer"
	style="icon-camera"
	/>

<!-- cart icon (cart.png in src directory) -->
<layer 
	name="the-cart-layer"
	style="icon-cart"
	/>

<!-- load style in action -->
<action name="set-layer-style">
	layer[the-camera-layer].loadstyle(icon-cart);
</action>

更多

请查看 sprity 文档


Gitter

如果看完文档还不知怎么用的请看包教包会版⤵️

var gulp = require('gulp'),
	gulpif = require('gulp-if'),
	sprity = require('sprity');

// 合并图片,生成雪碧图
gulp.task('sprites', function () {
    return sprity.src({
        src: './images/src/**/*.{png,jpg}',
        style: 'sprite.xml',
        margin: 6,
        cssPath: './images/dist/',
        orientation: 'binary-tree',
        // 请确保已经 npm install sprity-krpano-xml
        processor: 'krpano-xml', 
    })
    .pipe(gulpif('*.png', gulp.dest('./images/dist/'), gulp.dest('./krpano/')))
    .on('end', function() {
        console.log('end');
    });
});

sprity-krpano-xml English version

NPM version Build Status Dependencies

A krpano-xml style processor for sprity

Requirements

Install

Install with npm

npm install sprity sprity-krpano-xml --save-dev

If you want to use sprity-krpano-xml with the command line interface of sprity install it globally.

npm install sprity sprity-krpano-xml -g

Usage

On commandline:

sprity out/ src/*.png -s style.xml -p krpano-xml

In JavaScript:

var sprite = require('sprity');
sprite.create({
  ...
  style: 'style.xml',
  processor: 'krpano-xml'
  cssPath: './images/dist/',
  ...
}, function () {
  console.log('done');
});

krpano-xml style usage example

xml

<!-- camera icon (camera.png in src directory) -->
<layer 
	name="the-camera-layer"
	style="icon-camera"
	/>

<!-- cart icon (cart.png in src directory) -->
<layer 
	name="the-cart-layer"
	style="icon-cart"
	/>

<!-- load style in action -->
<action name="set-layer-style">
	layer[the-camera-layer].loadstyle(icon-cart);
</action>

More

See sprity documentation


Gitter