简单的HTML5 SVG移动和调整大小工具

分享于 

58分钟阅读

Web开发

  繁體

样例图像

内容的table

简介

HTML5提供了两个新元素,可以用来在我们的页面中绘制一些图形: canvassvgcanvas 绘图和 svg 图形之间的主要区别是 svg 图形实际上是HTML元素。 本文演示了如何利用这个特性,创建一个交互式边框( svg 绘图),可以移动和调整HTML元素。

在本文的第1部分中,我们将讨论创建我们的"移动和调整大小"边界的步骤。

在第2 部分中,我们将封装第1 部分的结果,并将一个可以用作通用的"移动和调整大小"工具的对象封装到第2 部分。

background

本文假设你对SVG和jQuery基本熟悉。 有关它的详细信息,你可以阅读以下链接:

第 1部分创建简单的SVG移动和调整形状大小

绘制SVG形状

创建 HTML5 SVG形状

绘制可以移动的可以调整形状的第一个步骤是创建一个包含形状的HTML文件。

使用 HTML4.01,我们声明文档类型如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

使用HTML5的声明要短得多:

<!DOCTYPEhtml>

创建HTML5文档后,我们可以向其中添加一个简单的SVG形状:

<svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="width:350px;height:200px"id="myShape"><ellipsecx="50%"cy="50%"rx="50%"ry="50%"stroke="#FF0000"stroke-width="2"fill="#800000"/></svg>
将SVG形状封装为调整大小指示器

为了用调整大小的边框包装我们的形状,我们添加另一个SVG图形:

<divstyle="left:100px;top:100px;position:relative;width:350px;height:200px"id="wrapper"><divstyle="left:0px;top:0px;position:absolute"class="internalWrapper"><svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="width:350px;height:200px"id="myShape"><ellipsecx="50%"cy="50%"rx="50%"ry="50%"stroke="#FF0000"stroke-width="2"fill="#800000"/></svg></div><svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="left:0px;top:0px;position:relative;width:100%;height:100%"><linex1="0"y1="0"x2="100%"y2="0"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"/><circlecx="0"cy="0"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"/><circlecx="100%"cy="0"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"/><circlecx="0"cy="100%"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"/><circlecx="100%"cy="100%"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"/></svg></div>

在代码 上面 中,我们用一个 div 元素包装我们的SVG形状,并使用另一个 svg 元素来。 我们可以实现相同的结果,只需绘制形状及它的调整边框,使用相同的svg 元素。 但是,当事情变得更加复杂时,我们将需要这种分离。

应用鼠标操作

包含jQuery库

由于我们将在页面中使用一些 jQuery,所以我们包括jQuery库:

<scripttype="text/javascript"src="js/jquery-1.9.1.min.js"></script>

我们的例子中,jquery的代码位于 js 文件夹下。 ( jQuery库的代码可以从以下位置下载: http://jquery.com/ )

为鼠标操作绘制SVG图形

如上所述,svg 图形是HTML元素( 与 canvas 绘图相反)。 因这里,为了使用这些元素应用鼠标操作,我们可以简单地处理相应的鼠标事件。 由于绘制边框的元素太小,我们添加另一个较大的透明元素,使我们能够捕捉鼠标事件的更多区域:

<linex1="0"y1="0"x2="100%"y2="0"stroke="#000"stroke-width="5"opacity="0"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#000"stroke-width="5"opacity="0"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"/><circlecx="0"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"/><circlecx="100%"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"/><circlecx="0"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"/><circlecx="100%"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"/>

除了调整大小边框,我们还添加了一个透明 rectangle 来启用移动动作:

<rectx="0"y="0"width="100%"height="100%"fill-opacity="0.5"opacity="0"/>
处理鼠标事件定义可能的鼠标操作

在处理鼠标事件以对元素应用操作之前,我们定义了受支持的操作:

var ActionsEnum = {
 None: 0,
 LeftResize: 1,
 TopResize: 2,
 RightResize: 3,
 BottomResize: 4,
 TopLeftResize: 5,
 BottomLeftResize: 6,
 TopRightResize: 7,
 BottomRightResize: 8,
 Move: 9}
正确设置当前鼠标操作

为了存储当前操作,我们为每个动作触发器( 激活操作的SVG元素) 添加 class:

<rectx="0"y="0"width="100%"height="100%"fill-opacity="0.5"opacity="0"class="moveActionTrigger"/><linex1="0"y1="0"x2="100%"y2="0"stroke="#000"stroke-width="5"opacity="0"class="topActionTrigger"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="bottomActionTrigger"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="leftActionTrigger"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="rightActionTrigger"/><circlecx="0"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="topLeftActionTrigger"/><circlecx="100%"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="topRightActionTrigger"/><circlecx="0"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="bottomLeftActionTrigger"/><circlecx="100%"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="bottomRightActionTrigger"/>

添加用于存储当前操作的变量:

var currentAction = ActionsEnum.None;

处理每个操作触发器的mousedown 事件以存储适当的操作:

var externalWrapperQueryStr = '#wrapper';// Query strings for the action-triggers.var moveActionTriggerQueryStr = externalWrapperQueryStr + '. moveActionTrigger';var topActionTriggerQueryStr = externalWrapperQueryStr + '. topActionTrigger';var bottomActionTriggerQueryStr = externalWrapperQueryStr + '. bottomActionTrigger';var leftActionTriggerQueryStr = externalWrapperQueryStr + '. leftActionTrigger';var rightActionTriggerQueryStr = externalWrapperQueryStr + '. rightActionTrigger';var topLeftActionTriggerQueryStr = externalWrapperQueryStr + '. topLeftActionTrigger';var topRightActionTriggerQueryStr = externalWrapperQueryStr + '. topRightActionTrigger';var bottomLeftActionTriggerQueryStr = externalWrapperQueryStr + '. bottomLeftActionTrigger';var bottomRightActionTriggerQueryStr = externalWrapperQueryStr + '. bottomRightActionTrigger';function initializeEventHandlers() {
 $(moveActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.Move;
 });
 $(topActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.TopResize;
 });
 $(bottomActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.BottomResize;
 });
 $(leftActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.LeftResize;
 });
 $(rightActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.RightResize;
 });
 $(topLeftActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.TopLeftResize;
 });
 $(topRightActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.TopRightResize;
 });
 $(bottomLeftActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.BottomLeftResize;
 });
 $(bottomRightActionTriggerQueryStr).mousedown(function (event) {
 currentAction = ActionsEnum.BottomRightResize;
 });
}
$(function () {
 initializeEventHandlers();
});

并且,处理文档事件的mouseup 以清除存储的操作:

function initializeEventHandlers() {
 //.. .$(document).mouseup(function (event) {
 // Clear the current action. currentAction = ActionsEnum.None;
 });}
应用适当的鼠标操作

为了对我们的形状应用适当的操作,我们处理文档事件的mousemove,以执行适当的操作:

  • 设置适当的事件处理程序:
    function initializeEventHandlers() {
     //.. .$(document).mousemove(function (event) {
     onMouseMove(event);
     });}
  • 计算位置的鼠标增量:
    function onMouseMove(event) {
     var currMouseX = event.clientX;
     var currMouseY = event.clientY;
     var deltaX = currMouseX - lastMouseX;
     var deltaY = currMouseY - lastMouseY;
     applyMouseMoveAction(deltaX, deltaY);
     lastMouseX = event.pageX;
     lastMouseY = event.pageY;
    }
  • 根据当前操作适当地更新大小和位置:
    function applyMouseMoveAction(deltaX, deltaY) {
     var deltaTop = 0;
     var deltaLeft = 0;
     var deltaWidth = 0;
     var deltaHeight = 0;
     if (currentAction == ActionsEnum.RightResize ||
     currentAction == ActionsEnum.TopRightResize ||
     currentAction == ActionsEnum.BottomRightResize) {
     deltaWidth = deltaX;
     }
     if (currentAction == ActionsEnum.LeftResize ||
     currentAction == ActionsEnum.TopLeftResize ||
     currentAction == ActionsEnum.BottomLeftResize) {
     deltaWidth = -deltaX;
     deltaLeft = deltaX;
     }
     if (currentAction == ActionsEnum.BottomResize ||
     currentAction == ActionsEnum.BottomLeftResize ||
     currentAction == ActionsEnum.BottomRightResize) {
     deltaHeight = deltaY;
     }
     if (currentAction == ActionsEnum.TopResize ||
     currentAction == ActionsEnum.TopLeftResize ||
     currentAction == ActionsEnum.TopRightResize) {
     deltaHeight = -deltaY;
     deltaTop = deltaY;
     }
     if (currentAction == ActionsEnum.Move) {
     deltaLeft = deltaX;
     deltaTop = deltaY;
     }
     updatePosition(deltaLeft, deltaTop);
     updateSize(deltaWidth, deltaHeight);
     adjustWrapper();
    }
  • 更新包装器的位置:
    function updatePosition(deltaLeft, deltaTop) {
     // Calculate the new position.var elemLeft = parseInt($(externalWrapperQueryStr).css('left'));
     var elemTop = parseInt($(externalWrapperQueryStr).css('top'));
     var newLeft = elemLeft + deltaLeft;
     var newTop = elemTop + deltaTop;
     // Set the new position. $(externalWrapperQueryStr).css('left', newLeft + 'px');
     $(externalWrapperQueryStr).css('top', newTop + 'px');
    }
  • 更新SVG形状的大小:
    function updateSize(deltaWidth, deltaHeight) {
     // Calculate the new size.var elemWidth = parseInt($("#myShape").width());
     var elemHeight = parseInt($("#myShape").height());
     var newWidth = elemWidth + deltaWidth;
     var newHeight = elemHeight + deltaHeight;
     // Don't allow a too small size. if (newWidth <0) {
     newWidth = 0;
     }
     if (newHeight <0) {
     newHeight = 0;
     }
     // Set the new size. $("#myShape").css('width', newWidth + 'px');
     $("#myShape").css('height', newHeight + 'px');
    }
  • 根据SVG形状的大小调整包装器的元素:
    var internalWrapperQueryStr = externalWrapperQueryStr + '. internalWrapper';function adjustWrapper() {
     var elemWidth = $("#myShape").width();
     var elemHeight = $("#myShape").height();
     $(internalWrapperQueryStr).width(elemWidth);
     $(internalWrapperQueryStr).height(elemHeight);
     $(externalWrapperQueryStr).width(elemWidth);
     $(externalWrapperQueryStr).height(elemHeight);
    }

与不同浏览器的兼容性

到这里,我们创建了一个SVG图形,并用SVG图形包装它,以便移动和调整该形状的大小。 使用 IE 运行它时,结果如下所示:

IE 结果

但是,当使用 Chrome 或者 Firefox 运行它时,我们得到了一个不同的结果( 在 svg 元素的边界中,所有的SVG图形都不会显示出来):

。Chrome 和 Firefox 结果

为了修复这个行为,我们改变了调整边框的大小,使用适当的固定值( 而不是关系值) 绘制。 为了达到这个目的,我们:

  • 为调整边框大小的SVG绘图提供位置,以位于元素的svg 边界中:
    • 将包装器的内部位置设置为 8 ( 拐角动作触发的半径) 像素偏移:
      <divstyle="left:8px;top:8px;position:absolute"class="internalWrapper"><!--.. . --></div>
    • 将包装器的外部大小设置为 16 像素( 每个边的8 像素),它的大小超过了呈现的SVG大小:
      var cornerActionTriggerRadius = 8;function adjustWrapper() {
       var elemWidth = parseInt($("#myShape").width());
       var elemHeight = parseInt($("#myShape").height());
       var externalWrapperWidth = (elemWidth + cornerActionTriggerRadius * 2) + 'px';
       var externalWrapperHeight = (elemHeight + cornerActionTriggerRadius * 2) + 'px'; $(internalWrapperQueryStr).width($("#myShape").width());
       $(internalWrapperQueryStr).height($("#myShape").height());
       $(externalWrapperQueryStr).width(externalWrapperWidth);
       $(externalWrapperQueryStr).height(externalWrapperHeight);
      }
  • 调整调整大小边框的SVG图形,以适应 svg 元素的边界:
    • 为调整大小边框图形的每个元素添加一个 class:
      <linex1="0"y1="0"x2="100%"y2="0"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"class="topDrawing"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"class="bottomDrawing"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"class="leftDrawing"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#808080"stroke-width="1"stroke-dasharray="5,5"class="rightDrawing"/><circlecx="0"cy="0"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"class="topLeftDrawing"/><circlecx="100%"cy="0"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"class="topRightDrawing"/><circlecx="0"cy="100%"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"class="bottomLeftDrawing"/><circlecx="100%"cy="100%"r="3"stroke="#0000FF"stroke-width="1"fill="#CCCCFF"class="bottomRightDrawing"/>
    • 定义用于设置 svg 元素的适当属性的函数:
      function setRectangleAttributes(rectQueryStr, x, y, width, height) {
       var rectElem = $(rectQueryStr);
       rectElem.attr('x', x);
       rectElem.attr('y', y);
       rectElem.attr('width', width);
       rectElem.attr('height', height);
      }function setLineAttributes(lineQueryStr, x1, y1, x2, y2) {
       var lineElem = $(lineQueryStr);
       lineElem.attr('x1', x1);
       lineElem.attr('y1', y1);
       lineElem.attr('x2', x2);
       lineElem.attr('y2', y2);
      }function setCircleAttributes(circleQueryStr, cx, cy) {
       var circleElem = $(circleQueryStr);
       circleElem.attr('cx', cx);
       circleElem.attr('cy', cy);
      }
    • 根据SVG形状的大小设置调整大小边框的元素:
      // Query strings for the resizing border's drawings.var topDrawingQueryStr = externalWrapperQueryStr + '. topDrawing';var bottomDrawingQueryStr = externalWrapperQueryStr + '. bottomDrawing';var leftDrawingQueryStr = externalWrapperQueryStr + '. leftDrawing';var rightDrawingQueryStr = externalWrapperQueryStr + '. rightDrawing';var topLeftDrawingQueryStr = externalWrapperQueryStr + '. topLeftDrawing';var topRightDrawingQueryStr = externalWrapperQueryStr + '. topRightDrawing';var bottomLeftDrawingQueryStr = externalWrapperQueryStr + '. bottomLeftDrawing';var bottomRightDrawingQueryStr = externalWrapperQueryStr + '. bottomRightDrawing';function adjustResizingBorder() {
       var elemWidth = parseInt($("#myShape").width());
       var elemHeight = parseInt($("#myShape").height());
       // Get the minimum and maximum values for X and Y.var minX = cornerActionTriggerRadius + 'px';
       var minY = cornerActionTriggerRadius + 'px';
       var maxX = (cornerActionTriggerRadius + elemWidth) + 'px';
       var maxY = (cornerActionTriggerRadius + elemHeight) + 'px';
       // Adjust moving rectange. setRectangleAttributes(moveActionTriggerQueryStr, minX, 
       minY, elemWidth + 'px', elemHeight + 'px');
       // Adjust resizing border lines. setLineAttributes(topDrawingQueryStr, minX, minY, maxX, minY);
       setLineAttributes(bottomDrawingQueryStr, minX, maxY, maxX, maxY);
       setLineAttributes(leftDrawingQueryStr, minX, minY, minX, maxY);
       setLineAttributes(rightDrawingQueryStr, maxX, minY, maxX, maxY);
       setLineAttributes(topActionTriggerQueryStr, minX, minY, maxX, minY);
       setLineAttributes(bottomActionTriggerQueryStr, minX, maxY, maxX, maxY);
       setLineAttributes(leftActionTriggerQueryStr, minX, minY, minX, maxY);
       setLineAttributes(rightActionTriggerQueryStr, maxX, minY, maxX, maxY);
       // Adjust resizing border circles. setCircleAttributes(topLeftDrawingQueryStr, minX, minY);
       setCircleAttributes(topRightDrawingQueryStr, maxX, minY);
       setCircleAttributes(bottomLeftDrawingQueryStr, minX, maxY);
       setCircleAttributes(bottomRightDrawingQueryStr, maxX, maxY);
       setCircleAttributes(topLeftActionTriggerQueryStr, minX, minY);
       setCircleAttributes(topRightActionTriggerQueryStr, maxX, minY);
       setCircleAttributes(bottomLeftActionTriggerQueryStr, minX, maxY);
       setCircleAttributes(bottomRightActionTriggerQueryStr, maxX, maxY);
      }

改善用户体验

鼠标超过效果

为了为动作触发器添加鼠标 over,我们为动作触发器的每个元素添加一个 class:

<rectx="0"y="0"width="100%"height="100%"fill-opacity="0.5"opacity="0"class="actionTrigger moveActionTrigger"/><linex1="0"y1="0"x2="100%"y2="0"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger topActionTrigger"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger bottomActionTrigger"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger leftActionTrigger"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger rightActionTrigger"/><circlecx="0"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger topLeftActionTrigger"/><circlecx="100%"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger topRightActionTrigger"/><circlecx="0"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger bottomLeftActionTrigger"/><circlecx="100%"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger bottomRightActionTrigger"/>

然后,为该类的hover 状态添加样式:

<style type="text/css">
. actionTrigger {
 transition: opacity 0.5s;opacity: 0; }
. actionTrigger:hover {
 transition: opacity 0.3s;opacity: 0.3; }</style>
适当的鼠标光标

为了将鼠标指针显示为动作触发器,可以将适当元素的cursor 样式设置为适当的鼠标光标:

<rectx="0"y="0"width="100%"height="100%"fill-opacity="0.5"opacity="0"class="actionTrigger moveActionTrigger"style="cursor:move"/><linex1="0"y1="0"x2="100%"y2="0"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger topActionTrigger"style="cursor:n-resize"/><linex1="0"y1="100%"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger bottomActionTrigger"style="cursor:s-resize"/><linex1="0"y1="0"x2="0"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger leftActionTrigger"style="cursor:w-resize"/><linex1="100%"y1="0"x2="100%"y2="100%"stroke="#000"stroke-width="5"opacity="0"class="actionTrigger rightActionTrigger"style="cursor:e-resize"/><circlecx="0"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger topLeftActionTrigger"style="cursor:nw-resize"/><circlecx="100%"cy="0"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger topRightActionTrigger"style="cursor:ne-resize"/><circlecx="0"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger bottomLeftActionTrigger"style="cursor:sw-resize"/><circlecx="100%"cy="100%"r="8"stroke="#000"stroke-width="0"fill="#000"opacity="0"class="actionTrigger bottomRightActionTrigger"style="cursor:se-resize"/>

结果是:

第 1部分结果

第 2部分- 将零件 1的结果封装在对象中

在对象中封装移动和调整大小行为

包装带有移动和调整大小行为的HTML元素

在本文的第2部分中,我们使用一些SVG元素创建一个移动和调整形状的形状。 在本文中,我们将创建可以重用对象,用于应用任何HTML元素的移动和调整大小行为,例如HTML元素。

第一步是:创建一个对象来封装移动和调整大小逻辑:

function MoveAndResizeElementWrapper(elementToWrap) {
 this.originalElement = elementToWrap;
}

在这个对象构造函数中,我们得到一个HTML元素,并将它的存储在一个属性中供以后使用。

除这里之外,我们还添加了用于存储包装器( 与第 1部分中创建的元素相同) 元素的HTML文本的属性:

var MoveAndResizeTool_ElementWrapper_wrappersCounter = 0;function MoveAndResizeElementWrapper(elementToWrap) {
 //.. .// Since we want a unique id for each wrapper, we add a counter value to the end of each id. MoveAndResizeTool_ElementWrapper_wrappersCounter++;
 this.wrapperId = 'MoveAndResizeTool_ElementWrapper' +
 MoveAndResizeTool_ElementWrapper_wrappersCounter.toString();
 this.wrapperStr = '<div style="position:relative" id="' + this.wrapperId + '">' +
 '<div style="left:8px;top:8px;position:absolute" class="internalWrapper"></div>' +
 '</div>';
}
MoveAndResizeElementWrapper.prototype.resizingBorderStr =
 '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
 style="left:0px;top:0px;position:relative;width:100%;height:100%"> ' +
 '<style type="text/css">. actionTrigger { transition: opacity 0.5s; ' + 
 'opacity: 0;}. actionTrigger:hover{transition: opacity 0.3s;opacity: 0.3;}</style>' +
 '<line x1="0" y1="0" x2="100%" y2="0" stroke="#808080" 
 stroke-width="1" stroke-dasharray="5,5" class="topDrawing"/>' +
 '<line x1="0" y1="100%" x2="100%" y2="100%" stroke="#808080" 
 stroke-width="1" stroke-dasharray="5,5" class="bottomDrawing"/>' +
 '<line x1="0" y1="0" x2="0" y2="100%" stroke="#808080" 
 stroke-width="1" stroke-dasharray="5,5" class="leftDrawing"/>' +
 '<line x1="100%" y1="0" x2="100%" y2="100%" stroke="#808080" 
 stroke-width="1" stroke-dasharray="5,5" class="rightDrawing"/>' +
 '<circle cx="0" cy="0" r="3" stroke="#0000FF" stroke-width="1" 
 fill="#CCCCFF" class="topLeftDrawing"/>' +
 '<circle cx="100%" cy="0" r="3" stroke="#0000FF" stroke-width="1" 
 fill="#CCCCFF" class="topRightDrawing"/>' +
 '<circle cx="0" cy="100%" r="3" stroke="#0000FF" stroke-width="1" 
 fill="#CCCCFF" class="bottomLeftDrawing"/>' +
 '<circle cx="100%" cy="100%" r="3" stroke="#0000FF" stroke-width="1" 
 fill="#CCCCFF" class="bottomRightDrawing"/>' +
 '<rect x="0" y="0" width="100%" height="100%" fill-opacity="0.5" 
 opacity="0" class="actionTrigger moveActionTrigger" style="cursor:move"/>' +
 '<line x1="0" y1="0" x2="100%" y2="0" stroke="#000" stroke-width="5" 
 opacity="0" class="actionTrigger topActionTrigger" style="cursor:n-resize"/>' +
 '<line x1="0" y1="100%" x2="100%" y2="100%" stroke="#000" stroke-width="5" 
 opacity="0" class="actionTrigger bottomActionTrigger" style="cursor:s-resize"/>' +
 '<line x1="0" y1="0" x2="0" y2="100%" stroke="#000" stroke-width="5" 
 opacity="0" class="actionTrigger leftActionTrigger" style="cursor:w-resize"/>' +
 '<line x1="100%" y1="0" x2="100%" y2="100%" stroke="#000" stroke-width="5" 
 opacity="0" class="actionTrigger rightActionTrigger" style="cursor:e-resize"/>' +
 '<circle cx="0" cy="0" r="8" stroke="#000" stroke-width="0" fill="#000" 
 opacity="0" class="actionTrigger topLeftActionTrigger" style="cursor:nw-resize"/>' +
 '<circle cx="100%" cy="0" r="8" stroke="#000" stroke-width="0" fill="#000" 
 opacity="0" class="actionTrigger topRightActionTrigger" style="cursor:ne-resize"/>' +
 '<circle cx="0" cy="100%" r="8" stroke="#000" stroke-width="0" fill="#000" 
 opacity="0" class="actionTrigger bottomLeftActionTrigger" style="cursor:sw-resize"/>' +
 '<circle cx="100%" cy="100%" r="8" stroke="#000" stroke-width="0" 
 fill="#000" opacity="0" class="actionTrigger 
 bottomRightActionTrigger" style="cursor:se-resize"/>' +
 '</svg>';

添加用于存储包装器元素的查询字符串的属性:

function MoveAndResizeElementWrapper(elementToWrap) {
 //.. .this.externalWrapperQueryStr = '#' + this.wrapperId;
 this.internalWrapperQueryStr = this.externalWrapperQueryStr + '. internalWrapper';
 // Query strings for the action-triggers.this.moveActionTriggerQueryStr = this.externalWrapperQueryStr + '. moveActionTrigger';
 this.topActionTriggerQueryStr = this.externalWrapperQueryStr + '. topActionTrigger';
 this.bottomActionTriggerQueryStr = this.externalWrapperQueryStr + '. bottomActionTrigger';
 this.leftActionTriggerQueryStr = this.externalWrapperQueryStr + '. leftActionTrigger';
 this.rightActionTriggerQueryStr = this.externalWrapperQueryStr + '. rightActionTrigger';
 this.topLeftActionTriggerQueryStr = this.externalWrapperQueryStr + '. topLeftActionTrigger';
 this.topRightActionTriggerQueryStr = this.externalWrapperQueryStr + '. topRightActionTrigger';
 this.bottomLeftActionTriggerQueryStr = this.externalWrapperQueryStr + '. bottomLeftActionTrigger';
 this.bottomRightActionTriggerQueryStr = this.externalWrapperQueryStr + '. bottomRightActionTrigger';
 // Query strings for the resizing border's drawings.this.topDrawingQueryStr = this.externalWrapperQueryStr + '. topDrawing';
 this.bottomDrawingQueryStr = this.externalWrapperQueryStr + '. bottomDrawing';
 this.leftDrawingQueryStr = this.externalWrapperQueryStr + '. leftDrawing';
 this.rightDrawingQueryStr = this.externalWrapperQueryStr + '. rightDrawing';
 this.topLeftDrawingQueryStr = this.externalWrapperQueryStr + '. topLeftDrawing';
 this.topRightDrawingQueryStr = this.externalWrapperQueryStr + '. topRightDrawing';
 this.bottomLeftDrawingQueryStr = this.externalWrapperQueryStr + '. bottomLeftDrawing';
 this.bottomRightDrawingQueryStr = this.externalWrapperQueryStr + '. bottomRightDrawing';
}

添加一个用于包装HTML元素的函数:

MoveAndResizeElementWrapper.prototype.addWrapperElements = function () {
 // Wrap the original element with a resizing border. $(this.originalElement).wrap(this.wrapperStr);
 $(this.internalWrapperQueryStr).after(this.resizingBorderStr);
 // Set the external wrapper's position to be 8 (the radius of the// corner action trigger) pixels less than the original element's position.var elemLeft = parseInt($(this.originalElement).css('left'));
 var elemTop = parseInt($(this.originalElement).css('top'));
 var wrapperLeft = (elemLeft - this.cornerActionTriggerRadius) + 'px';
 var wrapperTop = (elemTop - this.cornerActionTriggerRadius) + 'px';
 $(this.externalWrapperQueryStr).css('left', wrapperLeft);
 $(this.externalWrapperQueryStr).css('top', wrapperTop);
 $(this.externalWrapperQueryStr).css('position', $(this.originalElement).css('position'));
 // Set original element's position to be at the top-left corner of the internal wrapper. $(this.originalElement).css('left', 0);
 $(this.originalElement).css('top', 0);
 $(this.originalElement).css('position', 'relative');
}

在具有相应元素的HTML元素后,可以处理移动和调整大小行为,与第 1部分中的方式相同。 为了方便,以下是( 这些函数与第 1部分的等价函数相同,有一个区别- 这些函数使用对象属性而不是全局变量。)的函数:

  • 设置适当的事件处理程序:
    MoveAndResizeElementWrapper.prototype.initializeEventHandlers = function () {
     var wrapper = this;
     $(this.moveActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.Move;
     });
     $(this.topActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.TopResize;
     });
     $(this.bottomActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.BottomResize;
     });
     $(this.leftActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.LeftResize;
     });
     $(this.rightActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.RightResize;
     });
     $(this.topLeftActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.TopLeftResize;
     });
     $(this.topRightActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.TopRightResize;
     });
     $(this.bottomLeftActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.BottomLeftResize;
     });
     $(this.bottomRightActionTriggerQueryStr).mousedown(function (event) {
     wrapper.currentAction = wrapper.ActionsEnum.BottomRightResize;
     });
     $(document).mouseup(function (event) {
     // Clear the current action. wrapper.currentAction = wrapper.ActionsEnum.None;
     });
     $(document).mousemove(function (event) {
     wrapper.onMouseMove(event);
     });
    }
  • 处理 mousemove 事件:
    • 计算位置的鼠标增量:
      MoveAndResizeElementWrapper.prototype.onMouseMove = function (event) {
       var currMouseX = event.clientX;
       var currMouseY = event.clientY;
       var deltaX = currMouseX - this.lastMouseX;
       var deltaY = currMouseY - this.lastMouseY;
       this.applyMouseMoveAction(deltaX, deltaY);
       this.lastMouseX = event.pageX;
       this.lastMouseY = event.pageY;
      }
    • 根据当前操作适当地更新大小和位置:
      MoveAndResizeElementWrapper.prototype.applyMouseMoveAction = function (deltaX, deltaY) {
       var deltaTop = 0;
       var deltaLeft = 0;
       var deltaWidth = 0;
       var deltaHeight = 0;
       if (this.currentAction == this.ActionsEnum.RightResize ||
       this.currentAction == this.ActionsEnum.TopRightResize ||
       this.currentAction == this.ActionsEnum.BottomRightResize) {
       deltaWidth = deltaX;
       }
       if (this.currentAction == this.ActionsEnum.LeftResize ||
       this.currentAction == this.ActionsEnum.TopLeftResize ||
       this.currentAction == this.ActionsEnum.BottomLeftResize) {
       deltaWidth = -deltaX;
       deltaLeft = deltaX;
       }
       if (this.currentAction == this.ActionsEnum.BottomResize ||
       this.currentAction == this.ActionsEnum.BottomLeftResize ||
       this.currentAction == this.ActionsEnum.BottomRightResize) {
       deltaHeight = deltaY;
       }
       if (this.currentAction == this.ActionsEnum.TopResize ||
       this.currentAction == this.ActionsEnum.TopLeftResize ||
       this.currentAction == this.ActionsEnum.TopRightResize) {
       deltaHeight = -deltaY;
       deltaTop = deltaY;
       }
       if (this.currentAction == this.ActionsEnum.Move) {
       deltaLeft = deltaX;
       deltaTop = deltaY;
       }
       this.updatePosition(deltaLeft, deltaTop);
       this.updateSize(deltaWidth, deltaHeight); 
       this.adjustWrapper();
      }
    • 更新包装器的位置:
      MoveAndResizeElementWrapper.prototype.updatePosition = function (deltaLeft, deltaTop) {
       // Calculate the new position.var elemLeft = parseInt($(this.externalWrapperQueryStr).css('left'));
       var elemTop = parseInt($(this.externalWrapperQueryStr).css('top'));
       var newLeft = elemLeft + deltaLeft;
       var newTop = elemTop + deltaTop;
       // Set the new position. $(this.externalWrapperQueryStr).css('left', newLeft + 'px');
       $(this.externalWrapperQueryStr).css('top', newTop + 'px');
      }
    • 更新原始元素的大小:
      MoveAndResizeElementWrapper.prototype.updateSize = function (deltaWidth, deltaHeight) {
       // Calculate the new size.var elemWidth = parseInt($(this.originalElement).width());
       var elemHeight = parseInt($(this.originalElement).height());
       var newWidth = elemWidth + deltaWidth;
       var newHeight = elemHeight + deltaHeight;
       // Don't allow a too small size.var minumalSize = this.cornerActionTriggerRadius * 2;
       if (newWidth <minumalSize) {
       newWidth = minumalSize;
       }
       if (newHeight <minumalSize) {
       newHeight = minumalSize;
       }
       // Set the new size. $(this.originalElement).css('width', newWidth + 'px');
       $(this.originalElement).css('height', newHeight + 'px');
      }
    • 根据原始元素的大小调整包装器的元素:
      MoveAndResizeElementWrapper.prototype.cornerActionTriggerRadius = 8;
      MoveAndResizeElementWrapper.prototype.adjustWrapper = function () {
       var elemWidth = parseInt($(this.originalElement).width());
       var elemHeight = parseInt($(this.originalElement).height());
       var externalWrapperWidth = (elemWidth + this.cornerActionTriggerRadius * 2) + 'px';
       var externalWrapperHeight = (elemHeight + this.cornerActionTriggerRadius * 2) + 'px';
       $(this.internalWrapperQueryStr).width($(this.originalElement).width());
       $(this.internalWrapperQueryStr).height($(this.originalElement).height());
       $(this.externalWrapperQueryStr).width(externalWrapperWidth);
       $(this.externalWrapperQueryStr).height(externalWrapperHeight);
       // Adjust the resizing border.this.adjustResizingBorder();
      }
    • 根据原始元素的大小调整调整大小边框:
      MoveAndResizeElementWrapper.prototype.adjustResizingBorder = function () {
       var elemWidth = parseInt($(this.originalElement).width());
       var elemHeight = parseInt($(this.originalElement).height());
       // Get the minimum and maximum values for X and Y.var minX = this.cornerActionTriggerRadius + 'px';
       var minY = this.cornerActionTriggerRadius + 'px';
       var maxX = (this.cornerActionTriggerRadius + elemWidth) + 'px';
       var maxY = (this.cornerActionTriggerRadius + elemHeight) + 'px';
       // Adjust moving rectange.this.setRectangleAttributes(this.moveActionTriggerQueryStr, 
       minX, minY, elemWidth + 'px', elemHeight + 'px');
       // Adjust resizing border lines.this.setLineAttributes(this.topDrawingQueryStr, minX, minY, maxX, minY);
       this.setLineAttributes(this.bottomDrawingQueryStr, minX, maxY, maxX, maxY);
       this.setLineAttributes(this.leftDrawingQueryStr, minX, minY, minX, maxY);
       this.setLineAttributes(this.rightDrawingQueryStr, maxX, minY, maxX, maxY);
       this.setLineAttributes(this.topActionTriggerQueryStr, minX, minY, maxX, minY);
       this.setLineAttributes(this.bottomActionTriggerQueryStr, minX, maxY, maxX, maxY);
       this.setLineAttributes(this.leftActionTriggerQueryStr, minX, minY, minX, maxY);
       this.setLineAttributes(this.rightActionTriggerQueryStr, maxX, minY, maxX, maxY);
       // Adjust resizing border circles.this.setCircleAttributes(this.topLeftDrawingQueryStr, minX, minY);
       this.setCircleAttributes(this.topRightDrawingQueryStr, maxX, minY);
       this.setCircleAttributes(this.bottomLeftDrawingQueryStr, minX, maxY);
       this.setCircleAttributes(this.bottomRightDrawingQueryStr, maxX, maxY);
       this.setCircleAttributes(this.topLeftActionTriggerQueryStr, minX, minY);
       this.setCircleAttributes(this.topRightActionTriggerQueryStr, maxX, minY);
       this.setCircleAttributes(this.bottomLeftActionTriggerQueryStr, minX, maxY);
       this.setCircleAttributes(this.bottomRightActionTriggerQueryStr, maxX, maxY);
      }
      MoveAndResizeElementWrapper.prototype.setRectangleAttributes = 
       function (rectQueryStr, x, y, width, height) {
       var rectElem = $(rectQueryStr);
       rectElem.attr('x', x);
       rectElem.attr('y', y);
       rectElem.attr('width', width);
       rectElem.attr('height', height);
      }
      MoveAndResizeElementWrapper.prototype.setLineAttributes = 
       function (lineQueryStr, x1, y1, x2, y2) {
       var lineElem = $(lineQueryStr);
       lineElem.attr('x1', x1);
       lineElem.attr('y1', y1);
       lineElem.attr('x2', x2);
       lineElem.attr('y2', y2);
      }
      MoveAndResizeElementWrapper.prototype.setCircleAttributes = function (circleQueryStr, cx, cy) {
       var circleElem = $(circleQueryStr);
       circleElem.attr('cx', cx);
       circleElem.attr('cy', cy);
      }

为了显示和隐藏包装器,我们还添加了两个函数:

MoveAndResizeElementWrapper.prototype.showWrapper = function () {
 this.addWrapperElements();
 this.initializeEventHandlers();
}
MoveAndResizeElementWrapper.prototype.hideWrapper = function () {
 // Set original element's position, to be in the same position, after the wrapper is removed.var wrapperLeft = parseInt($(this.externalWrapperQueryStr).css('left'));
 var wrapperTop = parseInt($(this.externalWrapperQueryStr).css('top'));
 var elemLeft = (wrapperLeft + this.cornerActionTriggerRadius) + 'px';
 var elemTop = (wrapperTop + this.cornerActionTriggerRadius) + 'px';
 $(this.originalElement).css('left', elemLeft);
 $(this.originalElement).css('top', elemTop);
 $(this.originalElement).css('position', $(this.externalWrapperQueryStr).css('position'));
 // Put the original element instead of the wrapped element. $(this.externalWrapperQueryStr).replaceWith(this.originalElement);
}
通过jQuery选择器创建移动和调整包装器大小

根据给定的jQuery选择器,使用移动和调整大小行为包装HTML元素,我们添加了另一个对象:

function MoveAndResizeTool(jquerySelector) {
 this.wrappedElements = new Array();
 this.isShown = false;
 var selectedElements = $(jquerySelector);
 for (var elementInx = 0; elementInx <selectedElements.length; elementInx++) {
 var currElement = selectedElements[elementInx];
 this.wrappedElements[elementInx] = new MoveAndResizeElementWrapper(currElement);
 }
}

对于这个对象构造函数,我们根据给定的选择器找到相应的DOM元素,并为它们分别创建一个移动和调整大小包装器。

为了显示和隐藏元素的包装,我们还添加了两个函数:

MoveAndResizeTool.prototype.show = function () {
 if (this.isShown == false) {
 for (var elementInx = 0; elementInx <this.wrappedElements.length; elementInx++) {
 var currElement = this.wrappedElements[elementInx];
 currElement.showWrapper();
 }
 this.isShown = true;
 }
}
MoveAndResizeTool.prototype.hide = function () {
 if (this.isShown == true) {
 for (var elementInx = 0; elementInx <this.wrappedElements.length; elementInx++) {
 var currElement = this.wrappedElements[elementInx];
 currElement.hideWrapper();
 }
 this.isShown = false;
 }
}

最后,我们添加一个用于创建和显示 MoveAndResizeTool的函数:

function WrapWithMoveAndResizeTool(jquerySelector) {
 var resizeTool = new MoveAndResizeTool(jquerySelector);
 resizeTool.show();
 return resizeTool;
}

使用 MoveAndResizeTool

为了演示创建的MoveAndResizeTool,我们创建一个HTML文档,用于在某些元素上应用 MoveAndResizeTool。 在该文档中:

  • 添加jQuery库和我们的MoveAndResizeTool的脚本:
    <scripttype="text/javascript"src="js/jquery-1.9.1.min.js"></script><scripttype="text/javascript"src="js/MoveAndResizeTool.js"></script>
  • 添加一些元素:
    • SVG元素:
      <svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="left:20px;top:200px;width:300px;height:200px;position:absolute"class="mySvgs"><ellipsecx="50%"cy="50%"rx="50%"ry="50%"stroke="#FF0000"stroke-width="2"fill="#800000"/></svg><svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="left:340px;top:200px;width:100px;height:200px;position:absolute;overflow:hidden"class="mySvgs"><linex1="0"y1="0"x2="100%"y2="100%"stroke="#008000"stroke-width="15"stroke-linecap="round"/></svg><svgxmlns="http://www.w3.org/2000/svg"version="1.1"style="left:460px;top:200px;width:100px;height:200px;position:absolute"class="mySvgs"><rectx="0"y="0"width="100%"height="100%"stroke="#8000FF"fill="#8080FF"rx="10"ry="10"stroke-width="5"/></svg>
    • 文本:
      <divstyle="left:260px;top:20px;width:100px;height:110px;
       position:absolute;background:#afa;overflow:hidden;
       text-overflow:ellipsis"id="myParagraph"> Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
       Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
    • 图像:
      <imgsrc="img/Hydrangeas.jpg"alt="An image"id="myImage"style="left:380px;top:20px;width:170px;height:150px;position:absolute"/>
    • 按钮:
      <divstyle="left:260px;top:140px;
       width:100px;height:40px;position:absolute"id="myButton"><buttonstyle="left:0px;top:0px;width:100%;
       height:100%;position:absolute">My button</button></div>
  • MoveAndResizeTool 对象包装添加的元素:
    var svgResizeTool;var paragraphResizeTool;var imageResizeTool;var buttonResizeTool;
    $(function () {
     svgResizeTool = WrapWithMoveAndResizeTool(".mySvgs");
     paragraphResizeTool = WrapWithMoveAndResizeTool("#myParagraph");
     imageResizeTool = WrapWithMoveAndResizeTool("#myImage");
     buttonResizeTool = WrapWithMoveAndResizeTool("#myButton"); 
    });
  • 添加用于显示和隐藏 MoveAndResizeTool 包装的面板:
    • 用于显示和隐藏 MoveAndResizeTool 包装的函数:
      function showSvgElementsTool() {
       svgResizeTool.show();
       document.getElementById("btnShowSvg").disabled = true;
       document.getElementById("btnHideSvg").disabled = false;
      }function hideSvgElementsTool() {
       svgResizeTool.hide();
       document.getElementById("btnShowSvg").disabled = false;
       document.getElementById("btnHideSvg").disabled = true;
      }function showParagraphTool() {
       paragraphResizeTool.show();
       document.getElementById("btnShowParagraph").disabled = true;
       document.getElementById("btnHideParagraph").disabled = false;
      }function hideParagraphTool() {
       paragraphResizeTool.hide();
       document.getElementById("btnShowParagraph").disabled = false;
       document.getElementById("btnHideParagraph").disabled = true;
      }function showImageTool() {
       imageResizeTool.show();
       document.getElementById("btnShowImage").disabled = true;
       document.getElementById("btnHideImage").disabled = false;
      }function hideImageTool() {
       imageResizeTool.hide();
       document.getElementById("btnShowImage").disabled = false;
       document.getElementById("btnHideImage").disabled = true;
      }function showButtonTool() {
       buttonResizeTool.show();
       document.getElementById("btnShowButton").disabled = true;
       document.getElementById("btnHideButton").disabled = false;
      }function hideButtonTool() {
       buttonResizeTool.hide();
       document.getElementById("btnShowButton").disabled = false;
       document.getElementById("btnHideButton").disabled = true;
      }
    • 用于激活这些功能的按钮:
      <divstyle="left:10px;top:10px;width:auto;height:auto;position:absolute"class="operationsPanel"><divstyle="text-align:center;color:#080">Toggle MoveAndResizeTool</div><table><tr><td>SVG elements: </td><td><buttonid="btnShowSvg"onclick="showSvgElementsTool();">Show</button><buttonid="btnHideSvg"onclick="hideSvgElementsTool();">Hide</button></td></tr><tr><td>Paragraph: </td><td><buttonid="btnShowParagraph"onclick="showParagraphTool();">Show</button><buttonid="btnHideParagraph"onclick="hideParagraphTool();">Hide</button></td></tr><tr><td>Image: </td><td><buttonid="btnShowImage"onclick="showImageTool();">Show</button><buttonid="btnHideImage"onclick="hideImageTool();">Hide</button></td></tr><tr><td>Button: </td><td><buttonid="btnShowButton"onclick="showButtonTool();">Show</button><buttonid="btnHideButton"onclick="hideButtonTool();">Hide</button></td></tr></table></div>

结果是:

第 2部分结果


tool  Html5  MOV  SVG  移动  调整大小  
相关文章