fix path cross

2014-09-08 16:13:08 +08:00
parent e5d45a4572
commit 49bc739f8c
11 changed files with 232 additions and 157 deletions
--- a/demo/boundSegmentCross.html
+++ b/demo/boundSegmentCross.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>线段相交</title>
+    <script src="./lib/esl.js"></script>
+    <script src="./lib/jquery.min.js"></script>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        .point {
+            position: absolute;
+            width: 9px;
+            height: 9px;
+            margin-left: -5px;
+            margin-top: -5px;
+            border: 1px solid red;
+        }
+        [data-index="0"], [data-index="1"] {
+            border-color: green
+        }
+
+    </style>
+</head>
+<body>
+    <div class="point" data-index="0"></div>
+    <div class="point" data-index="1"></div>
+    <div class="point" data-index="2"></div>
+    <div class="point" data-index="3"></div>
+    <canvas id="canvas" width="500" height="500"></canvas>
+<script>
+    require.config({
+        baseUrl: '../src',
+        paths: {
+            demo: '../demo/js',
+        }
+    });
+    define('jquery', $);
+</script>
+
+<script>require(['demo/boundSegmentCross'])</script>
+</body>
+</html>
--- a/demo/js/boundSegmentCross.js
+++ b/demo/js/boundSegmentCross.js
@@ -0,0 +1,100 @@
+/**
+ * @file quadraticBezier.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 线段和bound相交
+ */
+
+define(
+    function(require) {
+
+        var isBoundingBoxSegmentCross = require('graphics/isBoundingBoxSegmentCross');
+
+        var entry = {
+
+            /**
+             * 初始化
+             */
+            init: function() {
+                var canvas = $('#canvas').get(0);
+                var ctx = canvas.getContext('2d');
+                var width = canvas.offsetWidth;
+                var height = canvas.offsetHeight;
+
+                var points = [{"x":50,"y":200},{"x":97,"y":98},{"x":58,"y":94},{"x":105,"y":201}];
+
+                $('[data-index]').each(function(index, item) {
+                    $(item).css({
+                        left: points[index].x,
+                        top: points[index].y
+                    })
+                });
+
+                var point;
+
+                $('.point').on('mousedown', function(e) {
+                    point = $(this);
+                });
+
+                $(document.body).on('mousemove', onMove);
+                $(document.body).on('mouseup', function(e) {
+                    onMove.call(this, e);
+                    point = null;
+                });
+
+                function onMove(e) {
+                    var px = e.pageX;
+                    var py = e.pageY;
+                    if(point) {
+                        point.css({
+                            left: px,
+                            top: py
+                        });
+                        var p = points[+point.attr('data-index')];
+                        p.x = px;
+                        p.y = py;
+                        draw();
+                    }
+                }
+
+                function draw() {
+                    
+                    var bound = {
+                        x: Math.min(points[0].x, points[1].x),
+                        y: Math.min(points[0].y, points[1].y),
+                        width: Math.abs(points[0].x - points[1].x),
+                        height: Math.abs(points[0].y - points[1].y)
+                    };
+
+                    ctx.clearRect(0, 0, width, height);
+                    //绘制2次贝塞尔曲线  
+                    ctx.beginPath();
+                    ctx.strokeStyle='black';
+                    ctx.moveTo(bound.x, bound.y);  
+                    ctx.lineTo(bound.x, bound.y + bound.height);
+                    ctx.lineTo(bound.x + bound.width, bound.y + bound.height);
+                    ctx.lineTo(bound.x + bound.width, bound.y);
+                    ctx.lineTo(bound.x, bound.y);
+
+                    ctx.moveTo(points[2].x, points[2].y);
+                    ctx.lineTo(points[3].x, points[3].y);
+
+                    ctx.lineWidth = 1;
+                    ctx.stroke();
+                    //console.time('bezier');
+                    var r = isBoundingBoxSegmentCross(bound, points[2], points[3]);
+                    //console.timeEnd('bezier');
+                    console.log(r);
+
+                }
+
+                draw();
+            }
+        };
+
+        entry.init();
+        
+        return entry;
+    }
+);
--- a/demo/js/render.js
+++ b/demo/js/render.js
@@ -82,7 +82,7 @@ define(
                var computeBoundingBox = require('graphics/computeBoundingBox');
                var pathAdjust = require('render/util/pathAdjust');

-                pathArray.reverse().forEach(function(path) {
+                pathArray.slice(4, 5).forEach(function(path) {
                    var shape = {};
                    shape.points = path;
                    var bound = computeBoundingBox.computePath(path);