如何使用mouseClicked函数缩放任意大小的图形而不丢失图形的整体形状p5.js
如何使用mouseClicked函数缩放任意大小的图形而不丢失图形的整体形状p5.js
提问于 2017-11-06 02:35:01
我有一张画在里面的画布。我的目标是使用mouseClicked函数生成绘图，并让它在画布上的任意位置(使用mouseClicked函数)以任意大小绘制，而不会失去形状。形状缩放正确，并且它们似乎指向正确的x和y坐标；但是，当绘图缩小时，形状展开，而当绘图放大时，形状移动得更近。如何缩放绘图，使其相对于x和y坐标，并且不会丢失其整体形状？
function setup() {
createCanvas(800, 800);
background('red');
}
function draw() {}
function drawMickey(mickeyX, mickeyY, mickeySize){
//ears
stroke('black');
strokeWeight(4);
fill('black');
ellipse(mickeyX, mickeyY, mickeySize, mickeySize);
ellipse(mickeyX + 170, mickeyY, mickeySize, mickeySize);
//head
stroke('black');
strokeWeight(4);
fill('black');
ellipse(mickeyX + 85, mickeyY + 90, mickeySize * 1.5, mickeySize * 1.5);
}
function mouseClicked(){
var mickeySize = random(0, width / 5);
drawMickey(mouseX, mouseY, mickeySize)
}<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
回答 2
Stack Overflow用户
发布于 2017-11-06 08:09:46
对于这样的问题，你能做的最好的事情就是拿出一些图表，画一些例子。考虑底部圆的中心在哪里，以及顶部的圆与之相关的位置。
您可能希望相对于底部圆定位顶部圆，同时考虑圆的大小。
下面是一个小示例：
function setup() {
createCanvas(800, 800);
}
function draw() {
var circleX = 600;
var circleY = 400;
var circleSize = 50;
ellipse(circleX, circleY, circleSize, circleSize);
ellipse(circleX - circleSize/2, circleY - circleSize/2, circleSize/2, circleSize/2);
ellipse(circleX + circleSize/2, circleY - circleSize/2, circleSize/2, circleSize/2);
}就像我说的，你能做的最好的事情就是画出一堆例子，直到你注意到一个模式。如果您仍然有问题，请在新的问题帖子中发布类似这样的MCVE。祝好运。
Stack Overflow用户
发布于 2017-11-06 06:18:39
您可能应该研究一下map()函数，该函数将数字从一个范围重新映射到另一个范围。您可以使用它来获得根据大小绘制椭圆的距离，map(mickeySize, 0, width / 5, 20, 85)。下面是函数的正确用法：https://p5js.org/reference/#/p5/map希望这能让你走上正轨。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47125141
复制相关文章
相似问题
腾讯云开发者
