如何使用for循环使用raphael图形绘制从小到大的矩形塔式建筑?

问题描述

我不知道如何使用for循环绘制8次塔?因此最终结果将如下所示

I don't get how to draw a tower using a for loop 8 times?so the end result will look like this

这就是我所拥有的

setup = function() {
  paper = Raphael ('pyramid', 500,500)


  for (i=1; i <= 8; i+=1){


rect = paper.rect(80,i*5,i*15,5)
 }
$(document).ready(setup)

推荐答案

成为CH =画布高度，而CW =画布宽度，

Being CH = Canvas Height and CW = Canvas Width,

每个块的高度H = CH/8.对于第一个，top = 0，底部=H.对于第二个，top = H，底部= H *2.因此对于n，top =(n-1)* H.

Each block have Height H = CH/8. For the first, top = 0, bottom = H. For the 2nd, top = H, bottom = H * 2. So for n, top = (n - 1) * H.

最后一个的宽度为CW，每步减小V，因此宽度W = CW-(8-n)*V.我们可以设置V = CW/8.块居中，所以Left =(CW-W)/2.

The width of the last is CW, decreasing by a variance V each step, so Width W = CW - (8 - n) * V. We can set V = CW/8 for instance. The block is centered, so Left = (CW - W) / 2.

cw = 180;
ch = 180;
s = 8;
paper = Raphael('pyramid', cw, ch)
for (n = 1; n <= s; n += 1) {
  h = ch / s;
  t = h * (n - 1);
  v = cw / s;
  w = cw - (s - n) * v;
  l = (cw - w) / 2;
  paper.rect (l, t, w, h);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="pyramid"></div>

这篇关于如何使用for循环使用raphael图形绘制从小到大的矩形塔式建筑?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！