Wie schreibe ich eine Funktion welche eine absteigende Diagonale zeichnet?

Hallo!

Ich soll für einen Canvas eine Funktion schreiben, wo der ersten Pixel der ersten Reihe oben links schwarz gefärbt werden soll, dann in der zweiten Reihen die ersten zwei, in der dritten die ersten drei und so weiter bis zum Ende des Canvas. Der Canvas ist 200x200 Pixel groß.

Ich weiß das die Position Links obere Ecke diese Position ist: (0, height - 1), rechts obere Ecke: (width - 1, height - 1)links untere: (0, 0) und rechts untere (width -1, 0).

Wenn ich also c = canvas_set_black(c, 0, 0); durchführe, würde das den Pixel der linken untere Ecke Schwarz färben.

Auf jeden Fall macht mein Code ungefähr was er soll, aber nicht an der richtigen Position. Hier mein Code (Bild 1) und das Ergebnis (Bild 2). Im zweiten 2 ist das obere Bild das Ergebnis meines Canvas und das untere Bild, das erwartete Ergebnis des Canvas. Wie man sehen kann färbt es zwar eine absteigende Diagonale, aber nicht an der Ecke die ich eigentlich möchte. Irgendeinen Tipp?

Bild zum Beitrag

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

GuteAntwort2021

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mathematik

17.11.2023, 14:36

Hallo.

Wenn du es wie unten haben willst, solltest du

for (int x = 0; x <= y ...

mal zu

for (int x = 0; x < 200-y ...

abändern und von da aus weitergucken.

Woher ich das weiß:Studium / Ausbildung – Diplom Wirtschaftsinformatiker

MossadTe

Fragesteller

17.11.2023, 15:15

Super, klappt jetzt. Vielen Dank!

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zur Frage

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zur Frage

Python,Tkinter, Wie kann man die weiße Umrandungslinie entfernem?

Hallo.

Heute habe ich Tkinter ausprobiert.

Jedoch bin ich auf das Problem gestoßen, dass ich beim Canvas oder Rechteck eine weiße Umrandungslinie habe. Die "outline" auf 0 zu setzen habe ich schon probiert, das hat jedoch nichts gebracht.

Das ist der Code mit dem ich die einzelnen Rechtecke zeichne:

#create canvas
canvas = Canvas(screen, width= width, height= height)

#sidebar
canvas.create_rectangle(sidebar_coord,sidebar_size, fill=sidebar_color,outline="")

#mainscreen
canvas.create_rectangle(mainscreen_coord,mainscreen_size, fill=mainscreen_color,outline="")

#tobar
title_bar = Frame(canvas, bg=topbar_color, height=43, width=1200)
title_bar.place(x=0, y=0)
title_bar.bind('<B1-Motion>', move_app)

Die Canvas größe ist (1200,850). Gleich groß wie mein Tkinter Fenster

Die "sidebar" startet bei (0,43) und geht bis (199,850)

Der "mainscreen" startet bei (199,43) und geht bis (1200,850)

Der schwarze Hintergrund gehört nicht zum Fenster. Ist nur mein Bildschirmhintergrund.

Ich habe nicht herausgefunden, was die weiße Umrandungslinie verursacht.

Villeicht kann ja hier mir jemand helfen.

Danke, schonmal im Voraus.

...zur Frage

Qt/QML Eine ScrollBar für ein TextField erstellen?

Hey,

ich möchte eine ScrollBar in Qt für ein TextField erstellen. Außerdem soll wenn man Text auswählt den man eingegeben hat und Rechts-Klick macht, ein Pop Up Menü angezeigt werden bei dem man Optionen wie z.B "Einfügen" oder "Kopieren" hat.

Wenn ich den Folgenden Code ausführe bekomme ich 2 Fehler:

qrc:/main.qml:89:26: QML Rectangle: Binding loop detected for property "implicitWidth"
qrc:/main.qml:89:26: QML Rectangle: Binding loop detected for property "implicitHeight"

Hier die main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
   id: mainWindow
   visible: true
   width: 900
   height: 600
   title: qsTr("Hello World")
    
    
   TextField {
       id: textFieldForURL
       width: parent.width/2
       height: parent.height/14
       y: parent.height/4
       x: -scrollBar1.position * width
    
       anchors.centerIn: parent
       leftPadding: 8
       topPadding: 4
       rightPadding: 43
    
       color: "white"
       font.pixelSize: parent.height/20
       selectionColor: "#3b3d45"
       placeholderText: "Type something"
       placeholderTextColor: "#3b3f44"
       selectByMouse: true
       maximumLength: 1000
  
       background: Rectangle {
          id: textFieldForURL_Background
          color: "black"
          radius: 5
  
          Rectangle {
             id: clearTextFieldForURL_Background
             width: parent.height
             height: parent.height
             anchors.right: parent.right
             color: "black"
          }
       }
  
      Text {
         id: clearTextFieldForURL
         height: parent.height
         width: parent.height
         text: "X"
         color: "white"
         font.pixelSize: 30
         anchors.right: parent.right
         leftPadding: 13
  
         MouseArea {
            id: clearTextFieldForURL_MouseArea
            height: textFieldForURL.height
            width: textFieldForURL.height
            hoverEnabled: true
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
  
            onClicked: {
               textFieldForURL.text = ""
               textFieldForURL.forceActiveFocus()
            }
            onEntered: {
               clearTextFieldForURL_Background.color = "#2a2c30"
            }
            onExited: {
               clearTextFieldForURL_Background.color = "black"
            }
         }
      }

      ScrollBar {
         id: scrollBar1
         hoverEnabled: true
         active: hovered || pressed
         orientation: Qt.Horizontal
         size: textFieldForURL_Background.width / textFieldForURL.width

         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom

         contentItem: Rectangle {
            implicitWidth: parent.width
            implicitHeight: parent.height
            radius: width / 2
            color: scrollBar1.pressed ? "white" : "#999999"
         }
      }
   }
}

...zur Frage

HTML Canvas: Wo ist mein Fehler?

HTML:

<canvas id="screen" style="width:200px; height:200px;"></canvas>

JS:

const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(0, 0, 80, 80);

Das sollte ein grünes Quadrat malen. Jedoch bekomme ich ein grünes Rechteck, das doppelt so hoch ist wie breit.

Warum?

Was mache ich falsch / Was habe ich übersehen?

Hier ein JSFiddle: https://jsfiddle.net/7cenmwh5/2/

...zur Frage

Wie korrigiere ich meinen CountSort-Code, damit er absteigend sortiert?

Hallo!

Meine Aufgabe: Ich soll eine Count Sort implementieren, und zwar so, dass man beim Programm aufrufen im Argument auswählen kann, ob das Array aufsteigend oder absteigend sortiert werden soll.

Mein Problem: Das Aufsteigen sortieren funktioniert, aber das Absteigen sortiert ebenfalls aufsteigend, obwohl es absteigend sortieren soll.

Meine Annahmen: Eigentlich gehe ich davon aus, dass meine Funktion "count_sort_write_output_array", welche das sortierte Array basierend auf der angegebenen Sortierrichtung erstellt, korrekt ist. Schließlich ist es einfach der gleiche Code wie für ASCENDING (aufsteigend), bloß mit geringfügigen Änderungen.

Ich denke eher, dass es daran liegt, dass mein Code erst gar nicht DESCENDING (absteigend) 'auswählt', wenn "desc" als Argument gegeben wird. Ich habe als Standardverhalten ASCENDING gesetzt (also falls kein Argument gegeben wird, oder ein falsches Argument gegeben wird, wird es aufsteigend sortiert), also dachte ich vielleicht, dass entweder

if (strcmp(order, "asc") == 0)

oder

else if (strcmp(order, "desc") == 0)

(in der SortDirection Funktion) irgendwie "falsch" sind, sodass die Sortierfunktion immer das Standardverhalten auswählt. (Also ASCENDING)

Als Debug-Versuch habe ich:

printf("Sortdirection must be defined. Using default: ASCENDING\n");

eingefügt, um zu schauen ob das wirklich der Fall ist. Dennoch wird dieser printf nie gezeigt, selbst wenn ich kein Argument eingebe. Was mich ziemlich verwirrt. Bricht es vorher ab?

Meine 'Frage' an euch: Ich würde es sehr schätzen, wenn jemand einen Blick darauf werfen könnte. Eventuell kann jemand erkennen, woran mein Semantikfehler liegt.

Aber würde ich es auch schätzen, wenn mir jemand andere Debug-Ideen nennen könnte. Ich habe noch nicht viel mit 'Debugging-Methoden' beschäftigt und habe meine Probleme bisher größtenteils mit printfs gelöst. Aber vielleicht gibt es da etwas leichteres!

Vielen Dank!

...zur Frage

C#: Wie kann ich ein limitiertes Fenster mit Sternen an den Seiten versehen?

Meine Aufgabe ist es, bei einem limitierten Fenster der Höhe 20 und Breite 20 mit Hilfe einer geeigneten Schleife einen Rahmen aus Sternen in die äußeren sichtbaren Felder der Konsole zu schreiben.

Versucht habe ich bereits jeweils oben und unten die Sterne zu programmieren. Funktionieren tut jedoch nur, dass der Cursor die Position ändert.

Hier ist der Code:

int width = 20;
int height = 20;
int left = 0;
int top = 0;
int bottom = 20;
int y = 0;

Console.SetWindowSize(width, height);
Console.ReadLine();
Console.SetCursorPosition(left, top);

for (y = 0; y < height; y++)
{
  Console.Write("*");
}

for (int x = 0; x < width; x++)
{
  Console.Write(" ");
}

Console.SetCursorPosition(left, bottom);

for (int yy = 0; yy > height; yy++)
{
  Console.Write("*");
}

for (int xx = 0; xx > width; xx++)
{
  Console.Write(" ");
}

Console.ReadLine();
Console.Write(" ");

...zur Frage

Wie tief kann man eine Programmiersprache lernen?

Im Bereich der IT und Softwareentwicklung bzw. Programmierung hab ich viel gelesen, dass es nicht ausreicht, viele Programmiersprachen zu können, sondern ist es wichtig, dass man die gelernte Sprachen wirklich gut beherrschen kann. Jetzt lautet meine Frage: Wie tief kann man in eine Programmiersprache hineingehen und es lernen?

...zur Frage

JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

HTML CSS Problem, Kann wer helfen?

Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.

Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
    <style>
        .gameField {
            max-width: 50%;
            margin: 25px auto;
            background-color: #151618;
            box-shadow: 20px 20px 15px black;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-left: 2.5%;
            padding-right: auto;
        }

        canvas {
            background-color: #000000;
            border: 3px solid #a60cf0;
            width: clamp(50px, 50%, 320px);
        }


        .buttonStart {
            background-color: #a60cf0;
        }
    </style>
</head>
<body>
    <div class="gameField">
        <canvas class="canvas" width="320px"  height="640px    </canvas>
        <button class="buttonStart">Start</button>
    </div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>

...zur Frage

Bild in Python 3.12.1 anzeigen lassen?

Wie kann man in Python 3.12.1 ein Bild anzeigen lassen? Ich verwende Visual Studio Code. Ich hab es mit "tkinter" und "pygame" versucht, aber das funktioniert beides nicht.

import tkinter

from tkinter import *

root = Tk()

canvas = Canvas(root, width=200, height=200)

canvas.pack()

yourImage = PhotImage(file="path/of/the/image.png")

canvas.create_image(0, 0, image=yourImage)

mainloop()

pygame kann ich gar nicht importieren in VSC. Hat jemand eine Lösung?

...zur Frage

was ist hier falsch gelaufen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rocket vs Aliens</title>
  <style>
    canvas {
      background-color: gray;
    }
    
  </style>
  <script>
    let KEY_SPACE = false;
    let KEY_UP = false;
    let KEY_DOWN = false;
    let canvas;
    let ctx;
    let backgroundImage = new Image();
    let rocket = {
      x: 100,
      y: 200,
      width: 200,
      height: 80,
      src: 'img/rocket.png'
    };
    let spaceship = {
      x: 500,
      y: 200,
      width: 100,
      height: 40,
      src: 'img/spaceship.png'
    };
    document.onkeydown = function(e) {
      if (e.keyCode ==32) { // Leertaste gedrückt
        KEY_SPACE = true;
      }
      if (e.keyCode ==32) { // unten gedrückt
        KEY_SPACE = true;
      }
    
      if (e.keyCode ==38) { // Oben gedrückt
        KEY_UP = true;
      }
    }
    document.onkeyup = function(e) {
      if (e.keyCode ==32) { // Leertaste losgelassen
        KEY_SPACE = false;
      }
    
      if (e.keyCode ==38) { // oben losgelassen
        KEY_UP = false;
      }
      if (e.keyCode ==40) { // unten losgelassen
        KEY_DOWN = false;
      }
    }
    function startGame () {
      canvas = document.getElementById('canvas');
       ctx = canvas.getContext('2d');
      loadImages();
      draw();
      // calculate
    }
    function loadImages() {
      backgroundImage.src = 'img/background.png';
      rocket.img = new Image();
      rocket.img.src = rocket.src;
      spaceship.img = new Image();
      spaceship.img.src = spaceship.src;
    }
    function draw() {
      ctx.drawImage(backgroundImage, 0, 0);
      ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.widht, rocket.height);
      
      requestAnimationFrame(draw);
    }
  </script>
</head>
<body onload="startGame()">
<canvas id="canvas" width="720" height="480"></canvas>
</body>
</html>

...zur Frage

Wie kann ich die Eingabe des Textfeldes auslesen?

Hallo!

Wie kann ich die Eingabe(zB.: "Hallo") in ein Textfeld(Tkinter) auslesen und verarbeiten?

Dass ich zum Beispiel, wenn Tom hineingeschrieben wird, eine if/else Stellung benutzen kann?

Mein Code:

from tkinter import *
from tkinter import ttk

window = Tk()
window.title('Memory Game')

tabs = ttk.Notebook(window)
root = ttk.Frame(tabs)

w = Canvas(window, width=1910, height=1080)
w.pack()

w.create_rectangle(0, 0, 150, 80, fill="red")                                                                    
w.create_text(75, 40, text="Frei", font=20)

w.create_rectangle(150, 0, 300, 80, fill="green")                                                          
textfeld1 = Text(master=w, width=10, height=1, wrap='word', font='arial')
textfeld1.place(x=180, y=30)

window.mainLoop()

...zur Frage

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen