new strokeScaleEnabled property which enables you to configure if the stroke style of a shape should scale or not as the shape itself scales, or as its ancestors scale

This commit is contained in:
Eric Rowell 2013-02-21 09:14:44 -08:00
parent 88e1c5fa08
commit 012e495a69
6 changed files with 50 additions and 5 deletions

View File

@ -18,6 +18,7 @@
* @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
* @param {String} [config.stroke] stroke color
* @param {Number} [config.strokeWidth] stroke width
* @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true
* @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true
* @param {String} [config.lineJoin] can be miter, round, or bevel. The default
* is miter

View File

@ -320,6 +320,10 @@
var context = this.context, stroke = shape.getStroke(), strokeWidth = shape.getStrokeWidth(), dashArray = shape.getDashArray();
if(stroke || strokeWidth) {
context.save();
if (!shape.getStrokeScaleEnabled()) {
context.setTransform(1, 0, 0, 1, 0, 0);
}
this._applyLineCap(shape);
if(dashArray && shape.getDashArrayEnabled()) {
if(context.setLineDash) {

View File

@ -31,7 +31,8 @@
strokeEnabled: true,
shadowEnabled: true,
dashArrayEnabled: true,
fillPriority: 'color'
fillPriority: 'color',
strokeScaleEnabled: true
});
this.nodeType = 'Shape';
@ -134,6 +135,18 @@
disableStroke: function() {
this.setAttr('strokeEnabled', false);
},
/**
* enable stroke scale
*/
enableStrokeScale: function() {
this.setAttr('strokeScaleEnabled', true);
},
/**
* disable stroke scale
*/
disableStrokeScale: function() {
this.setAttr('strokeScaleEnabled', false);
},
/**
* enable shadow
*/
@ -168,9 +181,8 @@
if(drawFunc && this.isVisible()) {
context.save();
canvas._applyOpacity(this);
canvas._applyLineJoin(this);
canvas._applyLineJoin(this);
canvas._applyAncestorTransforms(this);
drawFunc.call(this, canvas);
context.restore();
}
@ -199,7 +211,7 @@
Kinetic.Global.extend(Kinetic.Shape, Kinetic.Node);
// add getters and setters
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled', 'fillPriority']);
Kinetic.Node.addGettersSetters(Kinetic.Shape, ['stroke', 'lineJoin', 'lineCap', 'strokeWidth', 'drawFunc', 'drawHitFunc', 'dashArray', 'shadowColor', 'shadowBlur', 'shadowOpacity', 'fillPatternImage', 'fill', 'fillPatternX', 'fillPatternY', 'fillLinearGradientColorStops', 'fillRadialGradientStartRadius', 'fillRadialGradientEndRadius', 'fillRadialGradientColorStops', 'fillPatternRepeat', 'fillEnabled', 'strokeEnabled', 'shadowEnabled', 'dashArrayEnabled', 'fillPriority', 'strokeScaleEnabled']);
/**
* set stroke color

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,31 @@
Test.Modules.SHAPE = {
'scale rect with stroke scale disabled': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
y: 90,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: [3, 1],
draggable: true,
strokeScaleEnabled: false
});
layer.add(rect);
stage.add(layer);
//console.log(layer.toDataURL());
warn(layer.toDataURL() === dataUrls['scaled rect with disabled stroke scale'], 'probem with stroke scale disabling');
},
'test intersects()': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,

View File

@ -295,7 +295,7 @@ Test.Modules.IMAGE = {
};
imageObj.src = '../assets/darth-vader.jpg';
},
'*gaussian blur filter': function(containerId) {
'gaussian blur filter': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage({