github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix retina pic

Browse Source
This commit is contained in:
kekee000 2015-04-02 20:21:44 +08:00
parent 5a7d370b2c
commit 96637f3413
4 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/fonteditor/dialog/setting-import-pic.js
View File

@ -8,6 +8,7 @@ define(
function (require) {
var tpl = require('../template/dialog/setting-import-pic.tpl');
var pixelRatio = require('common/getPixelRatio');
var lang = require('common/lang');
var program = require('../widget/program');
var drawPath = require('render/util/drawPath');
@ -21,21 +22,6 @@ define(
return $('#import-pic-dialog').find('[data-filter="' + filter + '"]');
}
function fitImage(image) {
var canvas = $('#import-pic-canvas-origin').get(0);
canvas.style.visiblity = 'hidden';
var ctx = canvas.getContext('2d');
var width = image.width;
var height = image.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
var imgData = ctx.getImageData(0, 0, width, height);
return fitImageContours(imgData, getOptions());
}
/**
* 保存当前的灰度图像
* @param {Object} image 图片对象
@ -43,14 +29,16 @@ define(
function updateImage(image) {
var canvas = $('#import-pic-canvas-origin').get(0);
canvas.style.visiblity = 'hidden';
var ctx = canvas.getContext('2d');
var width = image.width;
var height = image.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, width, height);
var imgData = ctx.getImageData(0, 0, width, height);
canvas.style.width = (width / pixelRatio) + 'px';
canvas.style.height = (height / pixelRatio) + 'px';
canvas.ctx.drawImage(image, 0, 0, width, height);
var imgData = canvas.ctx.getImageData(0, 0, width, height);
var processor = program.data.imageProcessor;
processor.set(imgData);
processor.grayData = processor.clone();
@ -67,24 +55,23 @@ define(
function refreshCanvasOrigin() {
var binarizedImage = program.data.imageProcessor.get();
var canvas = $('#import-pic-canvas-origin').get(0);
canvas.style.visiblity = 'hidden';
var binarizedImage = program.data.imageProcessor.get();
var width = binarizedImage.width;
var height = binarizedImage.height;
var ctx = canvas.getContext('2d');
var imgData = ctx.getImageData(0, 0, width, height);
if (!binarizedImage.binarize) {
binarizeImage();
binarizedImage = program.data.imageProcessor.get();
}
var imgData = canvas.ctx.getImageData(0, 0, width, height);
var putData = imgData.data;
var binarizedImageData = binarizedImage.data;
var line;
for (var y = 0; y < height; y ++) {
var line = width * y;
line = width * y;
for (var x = 0; x < width; x++) {
var offset = line + x;
if (binarizedImageData[offset] === 0) {
@ -113,7 +100,7 @@ define(
});
});
ctx.putImageData(imgData, 0, 0);
canvas.ctx.putImageData(imgData, 0, 0);
canvas.style.visiblity = 'visible';
program.loading.hide();
@ -125,20 +112,24 @@ define(
function refreshCanvasFit() {
var result = program.data.imageProcessor.get();
var width = result.width;
var height = result.height;
var canvas = $('#import-pic-canvas-fit').get(0);
canvas.width = result.width;
canvas.height = result.height;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, result.width, result.height);
canvas.ctx.clearRect(0, 0, width, height);
canvas.width = pixelRatio * width;
canvas.height = pixelRatio * height;
canvas.style.width = (width / pixelRatio) + 'px';
canvas.style.height = (height / pixelRatio) + 'px';
// 绘制拟合曲线
ctx.fillStyle = 'green';
ctx.beginPath();
canvas.ctx.fillStyle = 'green';
canvas.ctx.beginPath();
var contours = program.data.imageProcessor.resultContours = program.data.pointsProcessor.getContours();
contours.forEach(function (contour) {
drawPath(ctx, contour);
drawPath(canvas.ctx, contour);
});
ctx.fill();
canvas.ctx.fill();
}
@ -167,8 +158,18 @@ define(
}
function bindEvent() {
$('#import-pic-file').get(0).onchange = function (e) {
// 这里由于对hidpi进行修正，需要修复下设置
var canvasOrigin = $('#import-pic-canvas-origin').get(0);
canvasOrigin.ctx = canvasOrigin.getContext('2d');
canvasOrigin.width = canvasOrigin.height = 0;
canvasOrigin.style.width = canvasOrigin.style.height = 'auto';
var canvasFit = $('#import-pic-canvas-fit').get(0);
canvasFit.ctx = canvasFit.getContext('2d');
canvasFit.width = canvasFit.height = 0;
canvasFit.style.width = canvasFit.style.height = 'auto';
$('#import-pic-file').get(0).onchange = function (e) {
var file = e.target.files[0];
var reader = new FileReader();
program.loading.show('正在加载图片...', 10000);

2
src/fonteditor/template/export/preview-ttf.tpl
View File

@ -1,4 +1,4 @@
<link rel="stylesheet" href="./css/preview.css">
<style>{%=previewCss%}</style>
<style>
@font-face {
font-family: '{%=fontFamily%}';

2
src/fonteditor/template/export/preview-ttf.tpl.js
View File

@ -1 +1 @@
define(function () {return '<link rel="stylesheet" href="./css/preview.css">\r\n<style>\r\n @font-face {\r\n font-family: \'{%=fontFamily%}\';\r\n {%if(fontFormat==\'eot\'){%}\r\n src: url({%=fontData%});\r\n {%} else if(fontFormat==\'ttf\') {%}\r\n src: url({%=fontData%}) format(\'truetype\');\r\n {%} else {%}\r\n src: url({%=fontData%}) format(\'{%=fontFormat%}\');\r\n {%}%}\r\n }\r\n .icon {\r\n font-family: \'{%=fontFamily%}\';\r\n }\r\n</style>\r\n<div class="main">\r\n <h1>预览{%=fontFormat%}格式字体</h1>\r\n <ul class="icon-list">\r\n {%glyfList.forEach(function(glyf) {%}\r\n <li>\r\n <i class="icon">{%=glyf.code%}</i>\r\n <div class="code">{%=glyf.codeName%}</div>\r\n <div class="name">{%=glyf.name%}</div>\r\n </li>\r\n {%});%}\r\n </ul>\r\n <div class="helps">第一步：使用font-face声明字体\r\n<pre>\r\n@font-face {\r\n font-family: \'{%=fontFamily%}\';\r\n src: url(\'{%=fontFamily%}.eot\'); /* IE9*/\r\n src: url(\'{%=fontFamily%}.eot?#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */\r\n url(\'{%=fontFamily%}.woff\') format(\'woff\'), /* chrome、firefox */\r\n url(\'{%=fontFamily%}.ttf\') format(\'truetype\'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/\r\n url(\'{%=fontFamily%}.svg#ux{%=fontFamily%}\') format(\'svg\'); /* iOS 4.1- */\r\n}\r\n</pre>\r\n第二步：定义使用{%=fontFamily%}的样式\r\n<pre>\r\n.{%=fontFamily%} {\r\n font-family:"{%=fontFamily%}" !important;\r\n font-size:16px;font-style:normal;\r\n -webkit-font-smoothing: antialiased;\r\n -webkit-text-stroke-width: 0.2px;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n</pre>\r\n第三步：挑选相应图标并获取字体编码，应用于页面\r\n<pre>\r\n &lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;\r\n</pre>\r\n</div>\r\n</div>\r\n';});
define(function () {return '<style>{%=previewCss%}</style>\r\n<style>\r\n @font-face {\r\n font-family: \'{%=fontFamily%}\';\r\n {%if(fontFormat==\'eot\'){%}\r\n src: url({%=fontData%});\r\n {%} else if(fontFormat==\'ttf\') {%}\r\n src: url({%=fontData%}) format(\'truetype\');\r\n {%} else {%}\r\n src: url({%=fontData%}) format(\'{%=fontFormat%}\');\r\n {%}%}\r\n }\r\n .icon {\r\n font-family: \'{%=fontFamily%}\';\r\n }\r\n</style>\r\n<div class="main">\r\n <h1>预览{%=fontFormat%}格式字体</h1>\r\n <ul class="icon-list">\r\n {%glyfList.forEach(function(glyf) {%}\r\n <li>\r\n <i class="icon">{%=glyf.code%}</i>\r\n <div class="code">{%=glyf.codeName%}</div>\r\n <div class="name">{%=glyf.name%}</div>\r\n </li>\r\n {%});%}\r\n </ul>\r\n <div class="helps">第一步：使用font-face声明字体\r\n<pre>\r\n@font-face {\r\n font-family: \'{%=fontFamily%}\';\r\n src: url(\'{%=fontFamily%}.eot\'); /* IE9*/\r\n src: url(\'{%=fontFamily%}.eot?#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */\r\n url(\'{%=fontFamily%}.woff\') format(\'woff\'), /* chrome、firefox */\r\n url(\'{%=fontFamily%}.ttf\') format(\'truetype\'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/\r\n url(\'{%=fontFamily%}.svg#ux{%=fontFamily%}\') format(\'svg\'); /* iOS 4.1- */\r\n}\r\n</pre>\r\n第二步：定义使用{%=fontFamily%}的样式\r\n<pre>\r\n.{%=fontFamily%} {\r\n font-family:"{%=fontFamily%}" !important;\r\n font-size:16px;font-style:normal;\r\n -webkit-font-smoothing: antialiased;\r\n -webkit-text-stroke-width: 0.2px;\r\n -moz-osx-font-smoothing: grayscale;\r\n}\r\n</pre>\r\n第三步：挑选相应图标并获取字体编码，应用于页面\r\n<pre>\r\n &lt;i class="{%=fontFamily%}"&gt;&amp;#x33&lt;/i&gt;\r\n</pre>\r\n</div>\r\n</div>\r\n';});

2
src/fonteditor/template/preview-render.js
View File

@ -8,6 +8,7 @@ define(
function (require) {
var utpl = require('utpl');
var exportRender = require('./export-render');
var previewRender = null; // 预览渲染器
var render = {
@ -22,6 +23,7 @@ define(
* @return {string} html片段
*/
renderPreview: function (data) {
data.previewCss = exportRender.renderPreviewCss();
previewRender = previewRender || utpl.template(require('./export/preview-ttf.tpl'));
return previewRender(data);
}