mirror of
https://github.com/konvajs/konva.git
synced 2025-05-03 12:27:47 +08:00
Kinetic.Text code cleanup
This commit is contained in:
Eric Rowell
parent
582ed89a02
commit
c9b99a9131
@ -1,4 +1,28 @@
|
||||
(function() {
|
||||
// constants
|
||||
var AUTO = 'auto',
|
||||
CALIBRI = 'Calibri',
|
||||
CANVAS = 'canvas',
|
||||
CENTER = 'center',
|
||||
CHANGE_KINETIC = 'Change.kinetic',
|
||||
CONTEXT_2D = '2d',
|
||||
DASH = '\n',
|
||||
EMPTY_STRING = '',
|
||||
LEFT = 'left',
|
||||
NEW_LINE = '\n',
|
||||
TEXT = 'text',
|
||||
TEXT_UPPER = 'Text',
|
||||
TOP = 'top',
|
||||
MIDDLE = 'middle',
|
||||
NORMAL = 'normal',
|
||||
PX_SPACE = 'px ',
|
||||
SPACE = ' ',
|
||||
RIGHT = 'right',
|
||||
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'],
|
||||
|
||||
// cached variables
|
||||
attrChangeListLen = ATTR_CHANGE_LIST.length;
|
||||
|
||||
/**
|
||||
* Text constructor
|
||||
* @constructor
|
||||
@ -19,7 +43,6 @@
|
||||
Kinetic.Text = function(config) {
|
||||
this._initText(config);
|
||||
};
|
||||
|
||||
function _fillFunc(context) {
|
||||
context.fillText(this.partialText, 0, 0);
|
||||
}
|
||||
@ -29,62 +52,67 @@
|
||||
|
||||
Kinetic.Text.prototype = {
|
||||
_initText: function(config) {
|
||||
var that = this;
|
||||
this.setDefaultAttrs({
|
||||
fontFamily: 'Calibri',
|
||||
text: '',
|
||||
fontFamily: CALIBRI,
|
||||
text: EMPTY_STRING,
|
||||
fontSize: 12,
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
fontStyle: 'normal',
|
||||
align: LEFT,
|
||||
verticalAlign: TOP,
|
||||
fontStyle: NORMAL,
|
||||
padding: 0,
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
width: AUTO,
|
||||
height: AUTO,
|
||||
lineHeight: 1
|
||||
});
|
||||
|
||||
this.dummyCanvas = document.createElement('canvas');
|
||||
this.dummyCanvas = document.createElement(CANVAS);
|
||||
|
||||
// call super constructor
|
||||
Kinetic.Shape.call(this, config);
|
||||
|
||||
// overrides
|
||||
this._fillFunc = _fillFunc;
|
||||
this._strokeFunc = _strokeFunc;
|
||||
|
||||
this.shapeType = 'Text';
|
||||
this.shapeType = TEXT_UPPER;
|
||||
this._setDrawFuncs();
|
||||
|
||||
// update text data for certain attr changes
|
||||
var attrs = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height'];
|
||||
var that = this;
|
||||
for(var n = 0; n < attrs.length; n++) {
|
||||
var attr = attrs[n];
|
||||
this.on(attr + 'Change.kinetic', that._setTextData);
|
||||
for(var n = 0; n < attrChangeListLen; n++) {
|
||||
this.on(ATTR_CHANGE_LIST[n] + CHANGE_KINETIC, that._setTextData);
|
||||
}
|
||||
|
||||
that._setTextData();
|
||||
this._setTextData();
|
||||
},
|
||||
drawFunc: function(canvas) {
|
||||
var context = canvas.getContext(), p = this.attrs.padding, lineHeightPx = this.attrs.lineHeight * this.getTextHeight(), textArr = this.textArr;
|
||||
var context = canvas.getContext(),
|
||||
p = this.getPadding(),
|
||||
fontStyle = this.getFontStyle(),
|
||||
fontSize = this.getFontSize(),
|
||||
fontFamily = this.getFontFamily(),
|
||||
textHeight = this.getTextHeight(),
|
||||
lineHeightPx = this.getLineHeight() * textHeight,
|
||||
textArr = this.textArr,
|
||||
textArrLen = textArr.length,
|
||||
width = this.getWidth();
|
||||
|
||||
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'px ' + this.attrs.fontFamily;
|
||||
context.textBaseline = 'middle';
|
||||
context.textAlign = 'left';
|
||||
context.font = fontStyle + SPACE + fontSize + PX_SPACE + fontFamily;
|
||||
context.textBaseline = MIDDLE;
|
||||
context.textAlign = LEFT;
|
||||
context.save();
|
||||
context.translate(p, 0);
|
||||
context.translate(0, p + this.getTextHeight() / 2);
|
||||
context.translate(0, p + textHeight / 2);
|
||||
|
||||
// draw text lines
|
||||
for(var n = 0; n < textArr.length; n++) {
|
||||
for(var n = 0; n < textArrLen; n++) {
|
||||
var text = textArr[n];
|
||||
|
||||
// horizontal alignment
|
||||
context.save();
|
||||
if(this.attrs.align === 'right') {
|
||||
context.translate(this.getWidth() - this._getTextSize(text).width - p * 2, 0);
|
||||
if(this.getAlign() === RIGHT) {
|
||||
context.translate(width - this._getTextSize(text).width - p * 2, 0);
|
||||
}
|
||||
else if(this.attrs.align === 'center') {
|
||||
context.translate((this.getWidth() - this._getTextSize(text).width - p * 2) / 2, 0);
|
||||
else if(this.getAlign() === CENTER) {
|
||||
context.translate((width - this._getTextSize(text).width - p * 2) / 2, 0);
|
||||
}
|
||||
|
||||
this.partialText = text;
|
||||
@ -95,7 +123,9 @@
|
||||
context.restore();
|
||||
},
|
||||
drawHitFunc: function(canvas) {
|
||||
var context = canvas.getContext(), width = this.getWidth(), height = this.getHeight();
|
||||
var context = canvas.getContext(),
|
||||
width = this.getWidth(),
|
||||
height = this.getHeight();
|
||||
|
||||
context.beginPath();
|
||||
context.rect(0, 0, width, height);
|
||||
@ -110,7 +140,7 @@
|
||||
*/
|
||||
setText: function(text) {
|
||||
var str = Kinetic.Type._isString(text) ? text : text.toString();
|
||||
this.setAttr('text', str);
|
||||
this.setAttr(TEXT, str);
|
||||
},
|
||||
/**
|
||||
* get width
|
||||
@ -118,7 +148,7 @@
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
getWidth: function() {
|
||||
return this.attrs.width === 'auto' ? this.getTextWidth() + this.attrs.padding * 2 : this.attrs.width;
|
||||
return this.attrs.width === AUTO ? this.getTextWidth() + this.getPadding() * 2 : this.attrs.width;
|
||||
},
|
||||
/**
|
||||
* get height
|
||||
@ -126,7 +156,7 @@
|
||||
* @methodOf Kinetic.Text.prototype
|
||||
*/
|
||||
getHeight: function() {
|
||||
return this.attrs.height === 'auto' ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
|
||||
return this.attrs.height === AUTO ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
|
||||
},
|
||||
/**
|
||||
* get text width
|
||||
@ -145,16 +175,19 @@
|
||||
return this.textHeight;
|
||||
},
|
||||
_getTextSize: function(text) {
|
||||
var dummyCanvas = this.dummyCanvas;
|
||||
var context = dummyCanvas.getContext('2d');
|
||||
var dummyCanvas = this.dummyCanvas,
|
||||
context = dummyCanvas.getContext(CONTEXT_2D),
|
||||
fontSize = this.getFontSize(),
|
||||
metrics;
|
||||
|
||||
context.save();
|
||||
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'px ' + this.attrs.fontFamily;
|
||||
var metrics = context.measureText(text);
|
||||
context.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily();
|
||||
|
||||
metrics = context.measureText(text);
|
||||
context.restore();
|
||||
return {
|
||||
width: metrics.width,
|
||||
height: parseInt(this.attrs.fontSize, 10)
|
||||
height: parseInt(fontSize, 10)
|
||||
};
|
||||
},
|
||||
/**
|
||||
@ -162,29 +195,33 @@
|
||||
* here
|
||||
*/
|
||||
_setTextData: function() {
|
||||
var charArr = this.attrs.text.split('');
|
||||
var arr = [];
|
||||
var row = 0;
|
||||
var addLine = true;
|
||||
var charArr = this.getText().split(EMPTY_STRING),
|
||||
arr = [],
|
||||
row = 0;
|
||||
addLine = true,
|
||||
lineHeightPx = 0,
|
||||
padding = this.getPadding();
|
||||
|
||||
this.textWidth = 0;
|
||||
this.textHeight = this._getTextSize(this.attrs.text).height;
|
||||
var lineHeightPx = this.attrs.lineHeight * this.textHeight;
|
||||
while(charArr.length > 0 && addLine && (this.attrs.height === 'auto' || lineHeightPx * (row + 1) < this.attrs.height - this.attrs.padding * 2)) {
|
||||
this.textHeight = this._getTextSize(this.getText()).height;
|
||||
lineHeightPx = this.getLineHeight() * this.textHeight;
|
||||
|
||||
while(charArr.length > 0 && addLine && (this.attrs.height === AUTO || lineHeightPx * (row + 1) < this.attrs.height - padding * 2)) {
|
||||
var index = 0;
|
||||
var line = undefined;
|
||||
addLine = false;
|
||||
|
||||
while(index < charArr.length) {
|
||||
if(charArr.indexOf('\n') === index) {
|
||||
if(charArr.indexOf(NEW_LINE) === index) {
|
||||
// remove newline char
|
||||
charArr.splice(index, 1);
|
||||
line = charArr.splice(0, index).join('');
|
||||
line = charArr.splice(0, index).join(EMPTY_STRING);
|
||||
break;
|
||||
}
|
||||
|
||||
// if line exceeds inner box width
|
||||
var lineArr = charArr.slice(0, index);
|
||||
if(this.attrs.width !== 'auto' && this._getTextSize(lineArr.join('')).width > this.attrs.width - this.attrs.padding * 2) {
|
||||
if(this.attrs.width !== AUTO && this._getTextSize(lineArr.join(EMPTY_STRING)).width > this.attrs.width - padding * 2) {
|
||||
/*
|
||||
* if a single character is too large to fit inside
|
||||
* the text box width, then break out of the loop
|
||||
@ -193,25 +230,25 @@
|
||||
if(index == 0) {
|
||||
break;
|
||||
}
|
||||
var lastSpace = lineArr.lastIndexOf(' ');
|
||||
var lastDash = lineArr.lastIndexOf('-');
|
||||
var lastSpace = lineArr.lastIndexOf(SPACE);
|
||||
var lastDash = lineArr.lastIndexOf(DASH);
|
||||
var wrapIndex = Math.max(lastSpace, lastDash);
|
||||
if(wrapIndex >= 0) {
|
||||
line = charArr.splice(0, 1 + wrapIndex).join('');
|
||||
line = charArr.splice(0, 1 + wrapIndex).join(EMPTY_STRING);
|
||||
break;
|
||||
}
|
||||
/*
|
||||
* if not able to word wrap based on space or dash,
|
||||
* go ahead and wrap in the middle of a word if needed
|
||||
*/
|
||||
line = charArr.splice(0, index).join('');
|
||||
line = charArr.splice(0, index).join(EMPTY_STRING);
|
||||
break;
|
||||
}
|
||||
index++;
|
||||
|
||||
// if the end is reached
|
||||
if(index === charArr.length) {
|
||||
line = charArr.splice(0, index).join('');
|
||||
line = charArr.splice(0, index).join(EMPTY_STRING);
|
||||
}
|
||||
}
|
||||
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
|
||||
@ -228,7 +265,7 @@
|
||||
|
||||
// add getters setters
|
||||
Kinetic.Node.addGettersSetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight']);
|
||||
Kinetic.Node.addGetters(Kinetic.Text, ['text']);
|
||||
Kinetic.Node.addGetters(Kinetic.Text, [TEXT]);
|
||||
/**
|
||||
* set font family
|
||||
* @name setFontFamily
|
||||
|
||||
@ -1,4 +1,214 @@
|
||||
Test.Modules.PERFORMANCE = {
|
||||
'*animating nested nodes': function(containerId) {
|
||||
var angularVelocity = 6;
|
||||
var angularVelocities = [];
|
||||
var lastRotations = 0;
|
||||
var controlled = false;
|
||||
var numWedges = 25;
|
||||
var angularFriction = 0.2;
|
||||
var target, activeWedge, stage, animatedLayer, wheel, pointer;
|
||||
|
||||
function getAverageAngularVelocity() {
|
||||
var total = 0;
|
||||
var len = angularVelocities.length;
|
||||
|
||||
if(len === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
for(var n = 0; n < len; n++) {
|
||||
total += angularVelocities[n];
|
||||
}
|
||||
return total / len;
|
||||
}
|
||||
function purifyColor(color) {
|
||||
var randIndex = Math.round(Math.random() * 3);
|
||||
color[randIndex] = 0;
|
||||
return color;
|
||||
}
|
||||
function getRandomColor() {
|
||||
var r = 100 + Math.round(Math.random() * 55);
|
||||
var g = 100 + Math.round(Math.random() * 55);
|
||||
var b = 100 + Math.round(Math.random() * 55);
|
||||
var color = [r, b, b];
|
||||
color = purifyColor(color);
|
||||
color = purifyColor(color);
|
||||
|
||||
return color;
|
||||
}
|
||||
function bind() {
|
||||
wheel.on('mousedown', function(evt) {
|
||||
angularVelocity = 0;
|
||||
controlled = true;
|
||||
target = evt.shape;
|
||||
});
|
||||
// add listeners to container
|
||||
document.body.addEventListener('mouseup', function() {
|
||||
controlled = false;
|
||||
angularVelocity = getAverageAngularVelocity() * 5;
|
||||
angularVelocities = [];
|
||||
}, false);
|
||||
|
||||
document.body.addEventListener('mousemove', function(evt) {
|
||||
var mousePos = stage.getMousePosition();
|
||||
if(controlled && mousePos && target) {
|
||||
var x = mousePos.x - wheel.getX();
|
||||
var y = mousePos.y - wheel.getY();
|
||||
var atan = Math.atan(y / x);
|
||||
var rotation = x >= 0 ? atan : atan + Math.PI;
|
||||
var targetGroup = target.getParent();
|
||||
|
||||
wheel.setRotation(rotation - targetGroup.startRotation - (target.getAngle() / 2));
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
function buildWedge(n) {
|
||||
var s = getRandomColor();
|
||||
var r = s[0];
|
||||
var g = s[1];
|
||||
var b = s[2];
|
||||
|
||||
var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||
r += 100;
|
||||
g += 100;
|
||||
b += 100;
|
||||
|
||||
var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||
|
||||
var wedge = new Kinetic.Group({
|
||||
rotation: 2 * n * Math.PI / numWedges,
|
||||
});
|
||||
|
||||
var wedgeBackground = new Kinetic.Wedge({
|
||||
radius: 400,
|
||||
angle: 2 * Math.PI / numWedges,
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 400,
|
||||
fillRadialGradientColorStops: [0, startColor, 1, endColor],
|
||||
fill: '#64e9f8',
|
||||
fillPriority: 'radial-gradient',
|
||||
stroke: '#ccc',
|
||||
strokeWidth: 2
|
||||
});
|
||||
|
||||
var text = new Kinetic.Text({
|
||||
x: 0,
|
||||
y: 0,
|
||||
text: 'testing testing testing testing',
|
||||
fontFamily: 'Calibri',
|
||||
fontSize: 30,
|
||||
fill: 'red'
|
||||
});
|
||||
|
||||
wedge.add(wedgeBackground);
|
||||
wedge.add(text);
|
||||
|
||||
wedge.startRotation = wedge.getRotation();
|
||||
|
||||
return wedge;
|
||||
}
|
||||
function animate(frame) {
|
||||
console.log(frame.frameRate);
|
||||
// handle wheel spin
|
||||
var angularVelocityChange = angularVelocity * frame.timeDiff * (1 - angularFriction) / 1000;
|
||||
angularVelocity -= angularVelocityChange;
|
||||
|
||||
if(controlled) {
|
||||
if(angularVelocities.length > 10) {
|
||||
angularVelocities.shift();
|
||||
}
|
||||
|
||||
angularVelocities.push((wheel.getRotation() - lastRotation) * 1000 / frame.timeDiff);
|
||||
}
|
||||
else {
|
||||
wheel.rotate(frame.timeDiff * angularVelocity / 1000);
|
||||
}
|
||||
lastRotation = wheel.getRotation();
|
||||
|
||||
// activate / deactivate wedges based on point intersection
|
||||
var intersection = stage.getIntersection({
|
||||
x: stage.getWidth() / 2,
|
||||
y: 100
|
||||
});
|
||||
|
||||
if(intersection) {
|
||||
var shape = intersection.shape;
|
||||
|
||||
if(shape && (!activeWedge || (shape._id !== activeWedge._id))) {
|
||||
pointer.setY(20);
|
||||
pointer.transitionTo({
|
||||
y: 30,
|
||||
easing: 'elastic-ease-out',
|
||||
duration: 0.3
|
||||
});
|
||||
|
||||
if(activeWedge) {
|
||||
activeWedge.setFillPriority('radial-gradient');
|
||||
}
|
||||
shape.setFillPriority('fill');
|
||||
activeWedge = shape;
|
||||
}
|
||||
}
|
||||
}
|
||||
function init() {
|
||||
stage = new Kinetic.Stage({
|
||||
container: containerId,
|
||||
width: 578,
|
||||
height: 200
|
||||
});
|
||||
animatedLayer = new Kinetic.Layer();
|
||||
wheel = new Kinetic.Group({
|
||||
x: stage.getWidth() / 2,
|
||||
y: 410
|
||||
});
|
||||
|
||||
for(var n = 0; n < numWedges; n++) {
|
||||
var wedge = buildWedge(n);
|
||||
wheel.add(wedge);
|
||||
}
|
||||
pointer = new Kinetic.Wedge({
|
||||
fillRadialGradientStartPoint: 0,
|
||||
fillRadialGradientStartRadius: 0,
|
||||
fillRadialGradientEndPoint: 0,
|
||||
fillRadialGradientEndRadius: 30,
|
||||
fillRadialGradientColorStops: [0, 'white', 1, 'red'],
|
||||
stroke: 'white',
|
||||
strokeWidth: 2,
|
||||
lineJoin: 'round',
|
||||
angleDeg: 30,
|
||||
radius: 30,
|
||||
x: stage.getWidth() / 2,
|
||||
y: 30,
|
||||
rotationDeg: -105,
|
||||
shadowColor: 'black',
|
||||
shadowOffset: 3,
|
||||
shadowBlur: 2,
|
||||
shadowOpacity: 0.5
|
||||
});
|
||||
|
||||
// add components to the stage
|
||||
animatedLayer.add(wheel);
|
||||
animatedLayer.add(pointer);
|
||||
stage.add(animatedLayer);
|
||||
|
||||
// bind events
|
||||
bind();
|
||||
|
||||
var anim = new Kinetic.Animation(animate, animatedLayer);
|
||||
|
||||
// wait one second and then spin the wheel
|
||||
setTimeout(function() {
|
||||
anim.start();
|
||||
}, 1000);
|
||||
|
||||
setTimeout(function() {
|
||||
anim.stop();
|
||||
}, 5000);
|
||||
}
|
||||
init();
|
||||
},
|
||||
'draw 1000 cropped and scaled images': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
@ -93,7 +303,7 @@ Test.Modules.PERFORMANCE = {
|
||||
};
|
||||
imageObj.src = '../assets/darth-vader.jpg';
|
||||
},
|
||||
'*draw 1000 pre-processed cropped and scaled images': function(containerId) {
|
||||
'draw 1000 pre-processed cropped and scaled images': function(containerId) {
|
||||
var imageObj = new Image();
|
||||
imageObj.onload = function() {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user