Question

我使用Asp.net开发了Web应用程序。因为我正在使用kineticjs在画布上绘制形状。我们还可以使用锚点重新调整形状的大小。我的问题是，当绘制相同类型的形状意味着重新调整仅为绘制的第一个形状可见的锚点。它对其他相同类型的形状不可见。

我正在使用以下kineticjs文件动能v5.0.1.js kinetic-v5.0.1.min.js

所以我想解决这个问题。有谁知道请帮帮我..

先谢谢

Answer 1

我不喜欢创建用于调整矩形大小的锚点对象。

例如，您用于查看此帖子的浏览器可能通过拖动浏览器窗口的边缘来调整大小。它根本没有调整大小的锚点。

将同一组锚点附加到不同的矩形当然是可以实现的，但需要为每个新矩形重新组装锚点。它还需要一些逻辑来让锚点知道现在将哪个其他矩形附加到自己身上。

<强>相反...

从操作系统中借用一个概念，让矩形的外部10（+/-）边框像素成为调整大小的句柄。

演示：http://jsfiddle.net/m1erickson/F6wmv/

以下是如何做到这一点的概述：

收听鼠标事件。

在mousedown：

确定矩形是否在鼠标下
如果是，还要确定鼠标是否在4个边框之一
在此矩形上激活拖动调整大小
（激活意味着保存选择了哪个矩形并保存选择了哪个边框）
在拖动开始时保存鼠标位置
设置一个标志，表示已开始调整大小

在mousemove中：

确定鼠标从起始位置移动的距离
将与拖动边框相对的矩形边固定到位
根据鼠标从起始位置移动的距离

在mouseup中：

清除调整大小标志（调整大小已结束）

关于如何实际调整大小：

保留关于每个矩形的以下信息：

左侧x坐标
右侧x坐标
顶边y坐标
底侧y坐标

然后当用户拖动鼠标时，将所选侧面改变鼠标拖动的距离。

例如，假设：

用户选择了矩形的右侧边框来拖动调整大小。
左侧x坐标从100开始。
右x坐标从200开始。

左侧x坐标在拖动过程中是固定的（始终== 100）

startingLeftX = 100;

正确的x坐标根据距离而变化。拖动鼠标的方向。

startingMouseX = 198;  // the starting mouseX is saved during mousedown

rightX += startingRightX + ( currentMouseX - startingMouseX );

因此，如果鼠标向右拖动50像素：

currentMouseX = 248;  // 198+50

rightX = 200 + ( 248 - 198 );  // so the new right-side is at 250

所以现在矩形已调整为150像素宽

newWidth = rightX - leftX;  // 250 - 100 = 150

context.fillRect( leftX, topY, newWidth, oldHeight );

为什么要这样调整大小？

调整大小是以用户已经熟悉的方式完成的 - 拖动边框
不需要任何锚点（没有复杂的锚管理代码！）
任何现有/新矩形只需使用4条信息（LeftX，RightX，TopY，BottomY）调整大小。

以下是工作示例的代码：

注意：此示例显示可选的可见拖动锚点。

这些锚是纯粹的化妆品（你可以通过抓住任何边界来调整大小甚至是锚点）

此示例使用html画布。您可以通过订阅动态矩形的dragstart, dragmove and dragend事件轻松地将其调整为KineticJS。

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;

    var iW;
    var iH;
    var iLeft=50;
    var iTop=50;
    var iRight,iBottom,iOrientation;

    var img=new Image();
    img.onload=function(){
        iW=img.width;
        iH=img.height;
        iRight=iLeft+iW;
        iBottom=iTop+iH;
        iOrientation=(iW>=iH)?"Wide":"Tall";
        draw(true);
    }
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png";

    var border=10;
    var isLeft=false;
    var isRight=false;
    var isTop=false;
    var isBottom=false;
    var iAnchor;

    canvas.onmousedown=handleMousedown;
    canvas.onmousemove=handleMousemove;
    canvas.onmouseup=handleMouseup;
    canvas.onmouseout=handleMouseup;


    function hitResizeAnchor(x,y){

        // which borders are under the mouse
        isLeft=(x>iLeft && x<iLeft+border);
        isRight=(x<iRight && x>iRight-border);
        isTop=(y>iTop && y<iTop+border);
        isBottom=(y<iBottom && y>iBottom-border);

        // return the appropriate anchor
        if(isTop && isLeft){ return(iOrientation+"TL"); }
        if(isTop && isRight){ return(iOrientation+"TR"); }
        if(isBottom && isLeft){ return(iOrientation+"BL"); }
        if(isBottom && isRight){ return(iOrientation+"BR"); }
        if(isTop){ return("T"); }
        if(isRight){ return("R"); }
        if(isBottom){ return("B"); }
        if(isLeft){ return("L"); }
        return(null);
    }

    var resizeFunctions={

        T: function(x,y){ iTop=y; },
        R: function(x,y){ iRight=x; },
        B: function(x,y){ iBottom=y; },
        L: function(x,y){ iLeft=x; },

        WideTR: function(x,y){
            iRight=x;
            iTop=iBottom-(iH*(iRight-iLeft)/iW);
        },
        TallTR: function(x,y){
            iTop=y;
            iRight=iLeft+(iW*(iBottom-iTop)/iH);
        },

        WideBR: function(x,y){
            iRight=x;
            iBottom=iTop+(iH*(iRight-iLeft)/iW);
        },
        TallBR: function(x,y){
            iBottom=y;
            iRight=iLeft+(iW*(iBottom-iTop)/iH);
        },

        WideBL: function(x,y){
            iLeft=x;
            iBottom=iTop+(iH*(iRight-iLeft)/iW);
        },
        TallBL: function(x,y){
            iBottom=y;
            iLeft=iRight-(iW*(iBottom-iTop)/iH);
        },

        WideTL: function(x,y){
            iLeft=x;
            iTop=iBottom-(iH*(iRight-iLeft)/iW);
        },
        TallTL: function(x,y){
            iBottom=y;
            iLeft=iRight-(iW*(iBottom-iTop)/iH);
        }
    };

    function handleMousedown(e){
         // tell the browser we'll handle this mousedown
         e.preventDefault();
         e.stopPropagation();
         var mouseX=e.clientX-offsetX;
         var mouseY=e.clientY-offsetY;
         iAnchor=hitResizeAnchor(mouseX,mouseY);
         isDown=(iAnchor);
    }

    function handleMouseup(e){
         // tell the browser we'll handle this mouseup
         e.preventDefault();
         e.stopPropagation();
         isDown=false;
         draw(true);
    }

    function handleMousemove(e){
         // tell the browser we'll handle this mousemove
         e.preventDefault();
         e.stopPropagation();
         // return if we're not dragging
         if(!isDown){return;}
         // get MouseX/Y
         var mouseX=e.clientX-offsetX;
         var mouseY=e.clientY-offsetY;

         // reset iLeft,iRight,iTop,iBottom based on drag
         resizeFunctions[iAnchor](mouseX,mouseY);

         // redraw the resized image
         draw(false);
    }


    function draw(withAnchors){
        var cx=iLeft+(iRight-iLeft)/2;
        var cy=iTop+(iBottom-iTop)/2;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(img,iLeft,iTop,iRight-iLeft,iBottom-iTop);   
        if(withAnchors){
            ctx.fillRect(iLeft,iTop,border,border);
            ctx.fillRect(iRight-border,iTop,border,border);
            ctx.fillRect(iRight-border,iBottom-border,border,border);
            ctx.fillRect(iLeft,iBottom-border,border,border);
            ctx.fillRect(cx,iTop,border,border);
            ctx.fillRect(cx,iBottom-border,border,border);
            ctx.fillRect(iLeft,cy,border,border);
            ctx.fillRect(iRight-border,cy,border,border);
        }
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag image borders (or anchors)</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

问题现已解决。我做了什么意味着，我为每种类型的形状添加了一个单独的组（如矩形形状的grouprect）。

在kineticjs中看不到锚？

2 个答案: