TypeScript/JavaScript图像旋转和调整大小

我有一个要求，我必须使用TypeScript（或者JavaScript，因为我使用Angular2）旋转和调整图像大小。此图像旋转和调整大小功能类似于MS Outlook（当您撰写邮件并在邮件正文中添加图像时）。
我能够调整大小和旋转单独，但我需要它像一个组合功能与下面的外观和感觉。

var minWidth = 60;
var minHeight = 40;

// Thresholds
var MARGINS = 4;

// End of what's configurable.
var clicked = null;
var onRightEdge, onBottomEdge, onLeftEdge, onTopEdge;

var b, x, y;

var redraw = false;

var pane = document.getElementById('pane');

var e;

// Mouse events
pane.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);

// Touch events 
pane.addEventListener('touchstart', onTouchDown);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchend', onTouchEnd);


function onTouchDown(e) {
  onDown(e.touches[0]);
  e.preventDefault();
}

function onTouchMove(e) {
  onMove(e.touches[0]);     
}

function onTouchEnd(e) {
  if (e.touches.length ==0) onUp(e.changedTouches[0]);
}

function onMouseDown(e) {
  onDown(e);
  e.preventDefault();
}

function onMove(ee) {
  calc(ee);
  e = ee;
  redraw = true;
}

function onUp(e) {
  calc(e);
  clicked = null;

}

function onDown(e) {
  calc(e);

  var isResizing = onRightEdge || onBottomEdge || onTopEdge || onLeftEdge;
  console.log("isResizing: " + isResizing);

  clicked = {
	x: x,
	y: y,
	cx: e.clientX,
	cy: e.clientY,
	w: b.width,
	h: b.height,
	isResizing: isResizing,
	onTopEdge: onTopEdge,
	onLeftEdge: onLeftEdge,
	onRightEdge: onRightEdge,
	onBottomEdge: onBottomEdge
  };
  
  
}


function animate() {

  requestAnimationFrame(animate);

  if (!redraw) return;

  redraw = false;

  if (clicked && clicked.isResizing) {

	if (clicked.onRightEdge) pane.style.width = Math.max(x, minWidth) + 'px';
	if (clicked.onBottomEdge) pane.style.height = Math.max(y, minHeight) + 'px';

	if (clicked.onLeftEdge) {
	  var currentWidth = Math.max(clicked.cx - e.clientX  + clicked.w, minWidth);
	  if (currentWidth > minWidth) {
		pane.style.width = currentWidth + 'px';
		pane.style.left = e.clientX + 'px'; 
	  }
	}

	if (clicked.onTopEdge) {
	  var currentHeight = Math.max(clicked.cy - e.clientY  + clicked.h, minHeight);
	  if (currentHeight > minHeight) {
		pane.style.height = currentHeight + 'px';
		pane.style.top = e.clientY + 'px';  
	  }
	}


	return;
  }

  // This code executes when mouse moves without clicking

  // style cursor
  if (onRightEdge && onBottomEdge || onLeftEdge && onTopEdge) {
	pane.style.cursor = 'nwse-resize';
  } else if (onRightEdge && onTopEdge || onBottomEdge && onLeftEdge) {
	pane.style.cursor = 'nesw-resize';
  } else if (onRightEdge || onLeftEdge) {
	pane.style.cursor = 'ew-resize';
  } else if (onBottomEdge || onTopEdge) {
	pane.style.cursor = 'ns-resize';
  } else {
	pane.style.cursor = 'default';
  }
}

function calc(e) {
  b = pane.getBoundingClientRect();
  x = e.clientX - b.left;
  y = e.clientY - b.top;

  onTopEdge = y < MARGINS;
  onLeftEdge = x < MARGINS;
  onRightEdge = x >= b.width - MARGINS;
  onBottomEdge = y >= b.height - MARGINS;
  
 
}

animate();


var count = 0;
    $(".btn-rotate").on("click",function(){
        if(count == 0){
            $("#pane").css("transform","rotate(90deg)");
            count++;
        } 
        else if (count == 1){
            $("#pane").css("transform","rotate(180deg)");
            count++;
        }  
        else if (count == 2){
            $("#pane").css("transform","rotate(270deg)");
            count++;
        }
        else {
            $("#pane").css("transform","rotate(360deg)");
            count=0;
        }
    });

#pane {
		position: absolute;
		top: 150px;
		left:200px;
	}
  
  img{
    width:100px;
    height: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
<h1>
You can Resize the Image by Hovering over the edges and drag it
</h1>
	<img src="https://www.bleedingcool.com/wp-content/uploads/2014/10/DC-Logo.png" id="pane" height="100px" width="100px"/>
<button class="btn-rotate">
Rotate Me
</button>
</body>

> rotateImage(imgSrc: string, degrees: number): string {
    // cria um elemento imagem
   let image = document.createElement('img');
    image.src=imgSrc;
    // cria um elemento canvas
    const canvas = document.createElement('canvas');
    // define a largura e altura do canvas para acomodar a imagem após a rotação
    canvas.width = image.width;
    canvas.height = image.height;
    // pega o contexto do canvas
   const context = canvas.getContext('2d');
    // move o ponto central do contexto para o centro do canvas
   context!.translate(canvas.width / 2, canvas.height / 2);
  // rotaciona o contexto pelo número de graus especificado
    context!.rotate(degrees * Math.PI / 180);
    // desenha a imagem no canvas, agora rotacionada
    context!.drawImage(image, -image.width / 2, -image.height / 2);
    // retorna o canvas com a imagem rotacionada
    return canvas.toDataURL();
  }

TypeScript/JavaScript图像旋转和调整大小

1条答案

相关问题

热门标签

最新问答