mirror of
https://github.com/konvajs/konva.git
synced 2025-05-03 04:13:55 +08:00
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:
parent
88e1c5fa08
commit
012e495a69
@ -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
|
||||
|
@ -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) {
|
||||
|
20
src/Shape.js
20
src/Shape.js
@ -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
@ -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,
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user