Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-09 08:50:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Much more usable multiline text.

Browse source
This commit is contained in:
kangax 2011-03-21 03:53:23 -04:00
parent ae4f038c85
commit b60edcc379
6 changed files with 60 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
dist/all.js vendored
View file

@ -1084,9 +1084,10 @@ Cufon.registerEngine('canvas', (function() {
var width = 0, lastWidth = null;
var maxWidth = 0;
var maxWidth = 0, lines = 1;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
lines++
if (width > maxWidth) {
maxWidth = width;
}
@ -1148,7 +1149,8 @@ Cufon.registerEngine('canvas', (function() {
var _height = size.convert(font.height);
Cufon.textOptions.width = _width;
Cufon.textOptions.height = _height;
Cufon.textOptions.height = _height * lines;
Cufon.textOptions.lines = lines;
if (HAS_INLINE_BLOCK) {
wStyle.width = wrapperWidth;
@ -1167,7 +1169,7 @@ Cufon.registerEngine('canvas', (function() {
g.translate(
-expandLeft - ((1/scale * canvas.width) / 2) + (Cufon.fonts[font.family].offsetLeft || 0),
-expandTop - (1/scale * canvas.height) / 2
-expandTop - (canvas.height / scale * Cufon.textOptions.lines) / 2
);
g.lineWidth = font.face['underline-thickness'];
@ -1201,7 +1203,7 @@ Cufon.registerEngine('canvas', (function() {
var left = 0;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
g.translate(-left, -font.ascent);
g.translate(-left, -font.ascent - font.ascent / 5 /* space between lines */);
left = 0;
continue;
}
@ -6626,7 +6628,8 @@ fabric.util.animate = animate;
scaleOffsetY = (padding + size2) / this.scaleY,
scaleOffsetX = (padding + size2) / this.scaleX,
scaleOffsetSizeX = (padding + size2 - size) / this.scaleX,
scaleOffsetSizeY = (padding + size2 - size) / this.scaleY;
scaleOffsetSizeY = (padding + size2 - size) / this.scaleY,
height = this.height;
ctx.save();
@ -6642,11 +6645,11 @@ fabric.util.animate = animate;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left - scaleOffsetX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width + scaleOffsetSizeX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width/2 - scaleOffsetX;
@ -6654,15 +6657,15 @@ fabric.util.animate = animate;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width/2 - scaleOffsetX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left + this.width + scaleOffsetSizeX;
_top = top + this.height/2 - scaleOffsetY;
_top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
_left = left - scaleOffsetX;
_top = top + this.height/2 - scaleOffsetY;
_top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
ctx.restore();

10
lib/cufon.js
View file

@ -673,9 +673,10 @@ Cufon.registerEngine('canvas', (function() {
var width = 0, lastWidth = null;
var maxWidth = 0;
var maxWidth = 0, lines = 1;
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
lines++
if (width > maxWidth) {
maxWidth = width;
}
@ -738,7 +739,8 @@ Cufon.registerEngine('canvas', (function() {
var _height = size.convert(font.height);
Cufon.textOptions.width = _width;
Cufon.textOptions.height = _height;
Cufon.textOptions.height = _height * lines;
Cufon.textOptions.lines = lines;
if (HAS_INLINE_BLOCK) {
wStyle.width = wrapperWidth;
@ -757,7 +759,7 @@ Cufon.registerEngine('canvas', (function() {
g.translate(
-expandLeft - ((1/scale * canvas.width) / 2) + (Cufon.fonts[font.family].offsetLeft || 0),
-expandTop - (1/scale * canvas.height) / 2
-expandTop - (canvas.height / scale * Cufon.textOptions.lines) / 2
);
g.lineWidth = font.face['underline-thickness'];
@ -792,7 +794,7 @@ Cufon.registerEngine('canvas', (function() {
for (var i = 0, l = chars.length; i < l; ++i) {
if (chars[i] === '\n') {
// move "caret" to the current left
g.translate(-left, -font.ascent);
g.translate(-left, -font.ascent - font.ascent / 5 /* space between lines */);
left = 0;
continue;
}

30
src/object.class.js
View file

@ -502,30 +502,29 @@
drawBorders: function(ctx) {
var padding = this.padding,
padding2 = padding * 2;
ctx.save();
ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
ctx.strokeStyle = this.borderColor;
var scaleX = 1 / (this.scaleX < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleX),
scaleY = 1 / (this.scaleY < this.MIN_SCALE_LIMIT ? this.MIN_SCALE_LIMIT : this.scaleY);
// could be set by a group, that this object is contained within
ctx.lineWidth = 1 / this.borderScaleFactor;
ctx.scale(scaleX, scaleY);
var w = this.getWidth(),
h = this.getHeight();
ctx.strokeRect(
~~(-(w / 2) - padding) + 0.5, // offset needed to make lines look sharper
~~(-(h / 2) - padding) + 0.5,
~~(w + padding2),
~~(h + padding2)
);
ctx.restore();
return this;
},
@ -552,7 +551,8 @@
scaleOffsetY = (padding + size2) / this.scaleY,
scaleOffsetX = (padding + size2) / this.scaleX,
scaleOffsetSizeX = (padding + size2 - size) / this.scaleX,
scaleOffsetSizeY = (padding + size2 - size) / this.scaleY;
scaleOffsetSizeY = (padding + size2 - size) / this.scaleY,
height = this.height;
ctx.save();
@ -571,12 +571,12 @@
// bottom-left
_left = left - scaleOffsetX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// bottom-right
_left = left + this.width + scaleOffsetSizeX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-top
@ -586,17 +586,17 @@
// middle-bottom
_left = left + this.width/2 - scaleOffsetX;
_top = top + this.height + scaleOffsetSizeY;
_top = top + height + scaleOffsetSizeY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-right
_left = left + this.width + scaleOffsetSizeX;
_top = top + this.height/2 - scaleOffsetY;
_top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
// middle-left
_left = left - scaleOffsetX;
_top = top + this.height/2 - scaleOffsetY;
_top = top + height/2 - scaleOffsetY;
ctx.fillRect(_left, _top, sizeX, sizeY);
ctx.restore();

4
test/demo/demo.js
View file

@ -365,7 +365,7 @@
canvas.freeDrawingColor = drawingColorEl.value;
canvas.freeDrawingLineWidth = parseInt(drawingLineWidthEl.value, 10) || 1;
/*
var helloWorld = new fabric.Text('Hello world!', {
left: getRandomInt(100, 650),
top: getRandomInt(100, 650),
@ -374,7 +374,7 @@
});
canvas.add(helloWorld);
*/
updateComplexity();
document.onkeydown = function(e) {

21
test/demo/font_definitions.js Normal file
View file

@ -0,0 +1,21 @@
(function(){
var fontDefinitions = {
'Modernist_One_400': 85,
'Quake_Cyr': 100,
'Terminator_Cyr': 10,
'Vampire95': 85,
'Encient_German_Gothic_400': 110,
'OdessaScript_500': 180,
'Globus_500': 100,
'CrashCTT_400': 60,
'CA_BND_Web_Bold_700': 60,
'Delicious_500': 80,
'Tallys_400': 70,
'DejaVu_Serif_400': 70
};
for (var prop in fontDefinitions) {
if (Cufon.fonts[prop.toLowerCase()]) {
Cufon.fonts[prop.toLowerCase()].offsetLeft = fontDefinitions[prop];
}
}
})();

6
test/demo/index.html
View file

@ -10,8 +10,7 @@
<script src="../../lib/excanvas.js" type="text/javascript"></script>
<![endif]-->
<script src="../../dist/all.js" type="text/javascript"></script>
<script src="../../dist/all.js" type="text/javascript"></script>
<script src="../fonts/Delicious_500.font.js"></script>
<link rel="stylesheet" href="demo.css" type="text/css">
@ -28,7 +27,7 @@
<canvas id="canvas" width="800" height="700"></canvas>
<div id="fps">&nbsp;</div>
<div id="complexity">Canvas complexity (number of paths):<strong></strong></div>
<!-- <textarea id="text"></textarea> -->
<textarea id="text"></textarea>
</div>
<div id="commands">
@ -214,6 +213,7 @@
</div>
<script src="centering_guidelines.js" type="text/javascript"></script>
<script src="aligning_guidelines.js" type="text/javascript"></script>
<script src="font_definitions.js"></script>
<script src="demo.js" type="text/javascript"></script>
</body>
</html>