Question

上传图片后，我会在图片上点击2次。这就是（x1，y1）和（x2，y2）的获得方式。给定这四个数字，我想通过例如P5.js在图像上绘制一个矩形。然后我应该说rect（x1，y1，x2，y2），但是这永远不会发生。我该如何解决这个问题（可能不是P5）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<div id="app">
  <button v-on:click="isHidden = false">Load img</button>
  <img onclick="showCoords(event)" v-if="!isHidden" v-bind:src="src[z]"></img>
</div>

  <script>

var test = new Vue({
  el: '#app',
  data: {
    src: ["cat.jpg", "dog.jpg"],
    z: Math.round(Math.random()),
    isHidden: true,
  }
})

var k=0;
var koors = [];
var flag = false;
function showCoords(event) {
  if (k===0){
    koors[0] = event.clientX;
    koors[1] = event.clientY;
    k+=1;
  } else if (k===1){
    flag = true;
    koors[2] = event.clientX;
    koors[3] = event.clientY;
  }
if ((koors[3] != 0) && (flag)){
  console.log(koors)
}
}
//p5
function setup(){
}
function draw(){
  console.log(koors[0],koors[1],koors[2],koors[3]);
  rect(koors[0],koors[1],koors[2],koors[3])
}


  </script>

  <script src="p5.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <script src="js.js"></script>
</body>
</html>

Answer 1

P5需要画布进行渲染。如果您不初始化一个，它会自己创建（您很麻烦）。而且，P5是强大的库，它具有用于事件，图像处理等的工具。对于当前示例，我不会使用任何其他库（vue）。

我在图片（css）的顶部创建了画布，其余部分正在使用P5播放。

var test = new Vue({
  el: '#app',
  data: {
    src: [ "https://i.stack.imgur.com/XZ4V5.jpg", "https://i.stack.imgur.com/7bI1Y.jpg"],
    z: Math.round(Math.random()),
    isHidden: false,
  }
})

var recStart;
var coords = {};

/*******************************************************************
* P5 setup 
* run once, use for initialisation.
*
* Create a canvas, change dimensions to 
* something meaningful(like image dim)
********************************************************************/
function setup(){
  var canvas = createCanvas(480, 320);
  canvas.parent('app');
}

/*******************************************************************
* P5 draw
* endless loop.
* 
* Lets redraw rectangle until second click. 
********************************************************************/
function draw(){
	if(recStart)
		drawRect();
}

/*******************************************************************
* drawRect
* 
* Draw a rectangle. mouseX and mouseY are P5 variables
* holding mouse current position.
********************************************************************/
function drawRect(){
	clear();
	noFill();
	stroke('red');
	rect(coords.x, coords.y, mouseX-coords.x, mouseY-coords.y);
}

/*******************************************************************
* P5 mouseClicked
* 
* P5 event. Again,  mouseX and mouseY are used. 
********************************************************************/
mouseClicked = function() {
    if (mouseButton === LEFT) {
		if(!recStart){			// start rectangle, give initial coords
			coords.x = mouseX;
			coords.y = mouseY;
			recStart = true;	// draw() starts to draw
		} else {
			recStart = false;	// stop draw()
			drawRect();			// draw final rectangle
			coords = {};		// clear coords
		}
    }
};

	canvas {
		width: 500px;
		height:500px;
		z-index: 2;
		border:1px solid;
		position:absolute;
		left: 0;
		top: 0;
	}
	img {
		z-index: 1;
		position: absolute;
		border: 2px solid black;
		left: 0;
		top: 0;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <img id="pilt" v-if="!isHidden" v-bind:src="src[z]"></img>
</div>

Answer 2

似乎您没有在任何地方致电draw。您可能还考虑将图像绘制到画布中，而不是在此画布中绘制。检查koors[3] != 0是否真的有风险，因为用户可能在第0个像素处单击。

在上传的图片上方绘制矩形

2 个答案: