Schlagwort: canvas

LaTeX Formeln in XAML Code umwandeln

Wer Formeln mit LaTeX erstellt, möchte meist, dass diese Formeln vektorisiert dargestellt werden, um beliebig groß und scharf skaliert werden zu können. Zur Darstellung in Windows 8 oder auf einem Windows Phone bietet sich dazu XAML Code an, der Vektor-Pfade benutzt.

Ich möchte kurz aufführen, wie die Arbeitsschritte aussehen, um aus einer LaTeX Formel eine vektorbasierte XAML Datei zu erstellen.
LaTeX Formeln in XAML Code umwandeln weiterlesen

HTML5 – JavaScript setDragImage Beispiel

Dank HTML5 gibt es modernen Browser drag und drop-Events, welche natives Drag & Drop ermöglichen. Es ist sogar vorgesehen, dass man das Bild (welches während eines Drag-Vorgangs angezeigt wird) ändern kann. Dazu muss man sich der setDragImage bedienen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var image = document.createElement('img');
        image.src = './images/logo.png';
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(image, -10, -10);
      }
    </script>

Anstelle eines Bildes (img) ist es auch erlaubt das neue HTML5 canvas-Element einzusetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var canvas = document.createElement('canvas');
        canvas.width = canvas.height = 100;
        var context = canvas.getContext('2d');
        context.fillStyle = 'rgb(255, 0, 255)';
        context.fillRect(0, 0, canvas.width, canvas.height);
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(canvas, -10, -10);
      }
    </script>

Hinweise:

  • Damit ein Objekt die Drag-Eigenschaft aufweist, muss es das Attribut draggable="true" erhalten
  • Damit das draggable-Attribut auch im Safari funktionert, muss folgender CSS-Stil gesetzt werden: 
    1
2
3
4
5
6
7

          [draggable=true] 
      {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
  • Für den Mozilla Firefox ist es notwendig, dass es ein ondragstart-Event gibt
  • Es muss zuerst dataTransfer.setData aufgerufen werden, damit dataTransfer.setDragImage funktioniert
  • dataTransfer.setData kann im Firefox nur in einem ondragstart-Event benutzt werden
  • dataTransfer.setDragImage erwartet ein Bild und eine Position (x,y). Die Position gibt ausgehend vom Mauszeiger an, an welcher Stelle das Drag Image angezeigt wird
  • Der Google Chrome erlaubt kein canvas-Element als Bild in setDragImage. Deshalb muss vorher das canvas-Objekt mit toDataURL in eine BASE64-kodierte Zeichenkette umgewandelt werden:
    • 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

        <div id="wrapper" 
         style="width:200px;height:200px;background-color:blue;"
         ondragstart="handleDragStart(event)">
    </div>
    <script type="text/javascript">
      var divWrapper = document.getElementById('wrapper');
      divWrapper.setAttribute('draggable', 'true'); // for Chrome
      divWrapper.style.backgroundColor = 'red';
 
      function handleDragStart(event)
      {
        // Drag Image
        var image = new Image();
        image.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        var canvasImage = new Image();
        canvasImage.src = canvas.toDataURL('image/png');
        // Event
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('text/html', this.innerHTML);
        event.dataTransfer.setDragImage(canvasImage, -10, -10);
      }
    </script>