zoukankan      html  css  js  c++  java
  • 解决移动图形越界的问题

    ##

    <!--边界问题研究 2018.3.11-->
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/core.css" />
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/fabric1.1.15.js"></script>
    </head>
    <body>
        <canvas id="c" width="880" height="520"></canvas>
    
        <script>
            ///////////////
            var canvas = new fabric.Canvas("c");
    
            var boundingBox = new fabric.Rect({
                fill: "yellow",
                left: 0,
                top: 0,
                originX: 'left',
                originY: 'top',
                 600,
                height: 400,
                hasBorders: false,
                hasControls: false,
                lockMovementX: true,
                lockMovementY: true,
                evented: false
            });
    
            var movingBox = new fabric.Rect({
                fill: "red",
                left: 0,
                top: 0,
                originX: 'left',
                originY: 'top',
                 100,
                height: 100,
                hasBorders: false
            });
    
    
            canvas.on("object:moving", function () {
    
                var top = movingBox.top;
                var bottom = top + movingBox.height;
    
                var left = movingBox.left;
                var right = left + movingBox.width;
    
                //固定的盒子边界
    
                var topBound = 0;
                var bottomBound = canvas.height;
                var leftBound = 0;
                var rightBound = canvas.width;
    
    
                var limitX = Math.min(Math.max(left, leftBound), rightBound - movingBox.currentWidth);
                var limitY = Math.min(Math.max(top, topBound), bottomBound - movingBox.currentHeight);
    
                movingBox.setLeft(limitX <= 0 ? 0 : limitX);//防止产生负值
                movingBox.setTop(limitY <= 0 ? 0 : limitY);
                //console.log("x=" + movingBox.left + " " + "Y=" + movingBox.top);
            });
    
            canvas.add(boundingBox);
            canvas.add(movingBox);
        </script>
    </body>
    </html>
  • 相关阅读:
    Android SDK、NDK、JNI的简单介绍
    深入理解计算机系统—异常
    Jmeter3.1 使用及新增报告功能
    jmeter3.1连接数据库报错,ORA00923: 未找到要求的 FROM 关键字
    Jenkins插件、war下载地址
    jenkins自动打tag
    jenkins参数化构建过程
    Jmeter接口测试自动化(jmeter+ant+jenkins持续集成)
    既然选择开始就不会停下
    知识提升整体
  • 原文地址:https://www.cnblogs.com/tinaluo/p/8542957.html
Copyright © 2011-2022 走看看