1

退房：http: //jsfiddle.net/aqaP7/4/，

和

http://shedlimited.debrucellc.com/test3/canvaskinclip.html ,

我想让 html5 图像可调整大小，它需要基于 html5 等，因为我的剪辑区域在 html5 中

我认为这与 mousedown 事件有关，但例如我如何判断鼠标是否在形状的角落？我可以将代码添加到我的圈子 - mousedown 函数吗？

 circle.on("mousedown", function(){
            draggingShape = this;
            var mousePos = stage.getMousePosition();
            draggingRectOffsetX = mousePos.x - circle._x;
            draggingRectOffsetY = mousePos.y - circle._y;
        });
        circle.on("mouseover", function(){
            document.body.style.cursor = "pointer";
        });
        circle.on("mouseout", function(){
            document.body.style.cursor = "default";
        });

        layer.add(circle);

        stage.on("mouseout", function(){
            draggingShape = undefined;
        }, false);

        stage.on("mousemove", function(){
            var mousePos = stage.getMousePosition();
            if (draggingShape) {
                draggingShape._x = mousePos.x - draggingRectOffsetX;
                draggingShape._y = mousePos.y - draggingRectOffsetY;

                layer.draw();
            }
4

1 回答 1

0

看看这个画布教程：

看看这个教程

这里有一些简单的代码可以帮助您入门：

var anchor;

function addAnchor(group, x, y, name) {
  var stage = group.getStage();
  var layer = group.getLayer();

  anchor = new Kinetic.Circle({
    x: x,
    y: y,
    stroke: "#666",
    fill: "#ddd",
    strokeWidth: 2,
    radius: 8,
    name: name,
    draggable: true
  });

  anchor.on("dragmove", function() {
    update(group, this);
    layer.draw();
  });
  anchor.on("mousedown touchstart", function() {
    group.setDraggable(false);
    this.moveToTop();
  });
  anchor.on("dragend", function() {
    group.setDraggable(true);
    layer.draw();
  });
  // add hover styling
  anchor.on("mouseover", function() {
    var layer = this.getLayer();
    document.body.style.cursor = "pointer";
    this.setStrokeWidth(4);
    layer.draw();
  });
  anchor.on("mouseout", function() {
    var layer = this.getLayer();
    document.body.style.cursor = "default";
    this.setStrokeWidth(2);
    layer.draw();
  });

  group.add(anchor);
}

本质上，您希望在单击时向形状添加锚点，然后使用这些锚点调整大小。

于 2013-01-17T14:36:59.367 回答