Skip to content

Commit

Permalink
Fix #5777 (exception "unexpected call to method or property access" m…
Browse files Browse the repository at this point in the history 
…ight be thrown when calling ctx.fill or ctx.stroke after a path whose area size is zero is drawn and ctx.clip() is called and shadowBlur is set)
  • Loading branch information
@100pah
100pah committed Jul 10, 2017
1 parent 4a31e2f commit c935385
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/chart/line/poly.js
View file
Expand Up @@ -3,6 +3,7 @@ define(function (require) {

var Path = require('zrender/graphic/Path');
var vec2 = require('zrender/core/vector');
var fixClipWithShadow = require('zrender/graphic/helper/fixClipWithShadow');

var vec2Min = vec2.min;
var vec2Max = vec2.max;
Expand Down Expand Up @@ -154,6 +155,8 @@ define(function (require) {
stroke: '#000'
},

brush: fixClipWithShadow(Path.prototype.brush),

buildPath: function (ctx, shape) {
var points = shape.points;

Expand Down Expand Up @@ -206,6 +209,8 @@ define(function (require) {
connectNulls: false
},

brush: fixClipWithShadow(Path.prototype.brush),

buildPath: function (ctx, shape) {
var points = shape.points;
var stackedOnPoints = shape.stackedOnPoints;
Expand Down
121 changes: 121 additions & 0 deletions test/canvas-replay.html
View file
@@ -0,0 +1,121 @@
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="ut/lib/canteen.js"></script>
<script src="lib/testHelper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="reset.css">
</head>
<body>
<style>
h1 {
line-height: 60px;
height: 60px;
background: #146402;
text-align: center;
font-weight: bold;
color: #eee;
font-size: 14px;
}
.chart {
height: 500px;
}
</style>


<canvas class="chart" id="main"></canvas>







<script>

var stack =

// -------------------------------------------------

[


{"method":"save","arguments":[]},{"method":"clearRect","arguments":[0,0,400,300]},{"method":"save","arguments":[]},{"attr":"fillStyle","val":"transparent"},{"method":"fillRect","arguments":[0,0,400,300]},{"method":"restore","arguments":[]},{"attr":"shadowBlur","val":0},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"attr":"shadowColor","val":"#000"},{"attr":"lineCap","val":"round"},{"attr":"lineJoin","val":"miter"},{"attr":"miterLimit","val":10},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"globalAlpha","val":1},{"attr":"globalCompositeOperation","val":"source-over"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40.5,240]},{"method":"lineTo","arguments":[40.5,60]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"butt"},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,40,45]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["数量",0,-6]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"round"},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354.5,240]},{"method":"lineTo","arguments":[354.5,60]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineCap","val":"butt"},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,354,45]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["比例",0,-6]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":null},{"attr":"strokeStyle","val":"#333"},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,240.5]},{"method":"lineTo","arguments":[35,240.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,204.5]},{"method":"lineTo","arguments":[35,204.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,168.5]},{"method":"lineTo","arguments":[35,168.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,132.5]},{"method":"lineTo","arguments":[35,132.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,96.5]},{"method":"lineTo","arguments":[35,96.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[40,60.5]},{"method":"lineTo","arguments":[35,60.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,240.5]},{"method":"lineTo","arguments":[359,240.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,204.5]},{"method":"lineTo","arguments":[359,204.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,168.5]},{"method":"lineTo","arguments":[359,168.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,132.5]},{"method":"lineTo","arguments":[359,132.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,96.5]},{"method":"lineTo","arguments":[359,96.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"lineWidth","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"moveTo","arguments":[354,60.5]},{"method":"lineTo","arguments":[359,60.5]},{"method":"stroke","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":"#333"},{"attr":"strokeStyle","val":null},{"method":"setTransform","arguments":[1,0,0,1,32,240]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["0",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,204]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["20",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,168]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["40",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,132]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["60",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,96]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["80",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,32,60]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"right"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["100",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,240]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["0%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,204]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["20%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,168]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["40%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,132]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["60%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,96]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["80%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"setTransform","arguments":[1,0,0,1,362,60]},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"textAlign","val":"left"},{"attr":"textBaseline","val":"middle"},{"method":"fillText","arguments":["100%",0,0]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"attr":"fillStyle","val":"#73cafd"},{"attr":"globalAlpha","val":1},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[53.857,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["28",62.857,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[99.571,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["25",108.571,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[145.286,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["27",154.286,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[191,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["26",200,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[236.714,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",245.714,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[282.429,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",291.429,235]},{"method":"restore","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[328.143,240,18,0]},{"method":"closePath","arguments":[]},{"method":"fill","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"save","arguments":[]},{"attr":"textAlign","val":"center"},{"attr":"textBaseline","val":"alphabetic"},{"attr":"fillStyle","val":"#73cafd"},{"attr":"font","val":"normal normal 12px sans-serif"},{"attr":"shadowBlur","val":0},{"attr":"shadowColor","val":"transparent"},{"attr":"shadowOffsetX","val":0},{"attr":"shadowOffsetY","val":0},{"method":"fillText","arguments":["33",337.143,235]},{"method":"restore","arguments":[]},{"method":"save","arguments":[]},{"method":"setTransform","arguments":[1,0,0,1,0,0]},{"method":"beginPath","arguments":[]},{"method":"rect","arguments":[61.857,58.5,0,183]},{"method":"closePath","arguments":[]},


{"method":"clip","arguments":[]},
{"method":"setTransform","arguments":[1,0,0,1,0,0]},
{"attr":"shadowBlur","val":10},
{"attr":"shadowOffsetX","val":10},
{"attr":"shadowOffsetY","val":10},
{"attr":"shadowColor","val":"rgba(0,0,0,0.4)"},
{"attr":"lineJoin","val":"bevel"},
{"attr":"fillStyle","val":"none"},
{"attr":"strokeStyle","val":"#999"},
{"attr":"globalAlpha","val":1},
{"attr":"lineWidth","val":3},


{"method":"setTransform","arguments":[1,0,0,1,0,0]},

{"method":"beginPath","arguments":[]},
{"method":"moveTo","arguments":[62.857,92.4]},
{"method":"lineTo","arguments":[108.571,112.2]},
{"method":"lineTo","arguments":[154.286,97.8]},
{"method":"lineTo","arguments":[200,88.8]},
// {"method":"lineTo","arguments":[245.714,61.8]},
{"method":"lineTo","arguments":[245.714,81.9]},
// {"method":"lineTo","arguments":[291.429,79.8]},
// {"method":"lineTo","arguments":[337.143,79.8]},
{"method":"stroke","arguments":[]}

]

// -------------------------------------------------




function doSet(ctx, stack) {
stack.forEach(function (item, index) {
if (item.method) {
if (item.method !== 'lastFail') {
ctx[item.method].apply(ctx, item.arguments);
}
}
else if (item.attr) {
ctx[item.attr] = item.val;
}
});
}

var canvas = document.getElementById('main');
canvas.width = 400;
canvas.height = 300;

// stack = stack.slice(0, 357);
// console.log(JSON.stringify(stack.slice(0, 357)));


doSet(canvas.getContext('2d'), stack);




</script>









</body>
</html>

0 comments on commit c935385

Please sign in to comment.