1

チェックアウト: http://jsfiddle.net/aqaP7/4/、

と

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

html5 画像をサイズ変更可能にしたいのですが、クリッピング領域が html5 にあるため、html5 などに基づいている必要があります。

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 に答える