Question

我想在画布周围旋转图表，同时保持字母直立。我试图使用ctx.rotate（＃），但是它使用看似画布左侧的中心来旋转整个图表。

以下链接提供了一个视觉效果：我希望它看起来像绿色，而不是红色，就像我目前使用我的代码一样。 Visual Explanation

以下是JSFiddle：http://jsfiddle.net/ddxarcag/143/

我的代码如下：

from PySide import QtCore, QtGui

class Ui_MainWindow(object):
    def myChanges(self):
        self.lineEdit.installEventFilter(self.lineEdit.setInputMask('99/99/9999'))
        self.lineEdit.setPlaceholderText('MM/DD/YYYY')

    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(557, 351)
        self.centralwidget = QtGui.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.lineEdit = QtGui.QLineEdit(self.centralwidget)
        self.lineEdit.setGeometry(QtCore.QRect(100, 130, 113, 20))
        self.lineEdit.setObjectName("lineEdit")
        self.lineEdit_2 = QtGui.QLineEdit(self.centralwidget)
        self.lineEdit_2.setGeometry(QtCore.QRect(320, 130, 113, 20))
        self.lineEdit_2.setObjectName("lineEdit_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtGui.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 557, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtGui.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

        self.myChanges()

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(QtGui.QApplication.translate("MainWindow", "MainWindow", None, QtGui.QApplication.UnicodeUTF8))


if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    MainWindow = QtGui.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

非常感谢任何帮助。谢谢！

Answer 1

一旦您知道如何将原点（0,0）移动到另一个点然后围绕它旋转轴，在画布中绘制旋转图形就会有些简单。

我在代码中添加了一些注释，以免重复代码和解释。

我还将函数移出$(document).ready并更改了一些数字以获得更圆的值。

＆＃13;

$(document).ready(function () {
  init();
});

function init() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  draw(ctx);
}

function draw(ctx) {
  ctx.font = "12.0px 'Myriad Pro'";
  var angle = Math.random()*150; //Run more times to see other angles
    
  //This translates the 0,0 to the center of the horizontal line
  ctx.translate(100, 100);
  
  //This draws the original straight line
  ctx.beginPath();
  ctx.moveTo(-50, 0);  //The coordinates are relative to the new origin
  ctx.lineTo(50, 0);
  ctx.stroke();
  //Draw the first letter
  var x = WordSelector1();
  ctx.fillText(x, -60, 0);

  //This section draws the rotated line with the text straight

  //Rotate the canvas axes by "angle"
  ctx.rotate(angle * Math.PI/180);
  ctx.beginPath();
  ctx.moveTo(-50, 0); //The relative coordinates DO NOT change
  ctx.lineTo(50, 0); //This shows that the axes rotate, not the drawing
  ctx.stroke();

  var x = WordSelector1();
  ctx.translate(-60,0); //The origin must now move where the letter is to be placed
  ctx.rotate(-angle * Math.PI/180); //Counter-rotate by "-angle"
  ctx.fillText(x, 0, 0); //Draw the letter
}

function WordSelector1() {
  var word = ['A', 'B', 'C'];
  var random = word[Math.floor(Math.random() * word.length)];
  return random;
}

＆＃13;

canvas{
  border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

＆＃13;

一个警告：绘制完所有内容后，轴平行于画布边框结束，因为它是按角度旋转的，但原点是放置最后一个字母的位置。您可能希望使用ctx.save()和ctx.restore()来避免必须还原翻译和轮播。

如何在保持数字直立的同时在画布中旋转图表？

1 个答案: