Question

和

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();
            }

Answer 1

看看这个画布教程：

Take a look at this tutorial

以下是一些简单的代码，可以帮助您入门：

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);
}

基本上，您希望在点击时将锚点添加到形状，然后使用这些锚点进行大小调整。

如何使html5画布形状可调整大小

1 个答案: