Ergebnis 1 bis 7 von 7
  1. #1
    sd44 ist offline Grünschnabel
    registriert
    08-03-2017
    Beiträge
    2

    SAP SDK - sketch.js integrieren

    Hallo Zusammen,

    ich bin gerade dabei ein SDK aufzubauen. Das klappt auch super.

    Nun soll in das SDK eine Komponente eingebaut werden mit der es möglich sein kann zu zeichnen. Die komponente gibt es bereits untern

    Sketchs

    NUn das Problem. Die Funktion vom Malen muss beim Startup bereits zur Verfügung stehen. Und das bekomme ich zur Zeit nicht hin.

    Ein weiterer Fehler :type off Error is not a function TypeError: $(...).sketch is not a function


    Code:
    sap.designstudio.sdk.Component.subclass("com.ac.pdfexport.PDFExport", function() {
    
    	var that = this;
    	var text = "Export PDF";
    	var pdfMethod = 1;
    	var myLayer = document.createElement('canvas');
    
    	myLayer.id = 'canvas';
    	myLayer.style.position = 'absolute';
    	myLayer.style.left = '1px';
    	myLayer.style.top = '1px';
    	myLayer.style.padding = '1px';
    //	myLayer.style.background = '#00ff00';
    	myLayer.style.border = 'solid';
    	document.body.appendChild(myLayer);
    
    	
    
    	
    	var c = document.getElementById("canvas");
    	var ctx = c.getContext("2d");
    	
    	
    	
    
    	
    	$(function() {
    	    $('#canvas').sketch;
    	  });
    	
    	var __slice = Array.prototype.slice;
    	(function($) {
    	  var Sketch;
    	  $.fn.sketch = function() {
    	    var args, key, sketch;
    	    key = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
    	    if (this.length > 1) {
    	      $.error('Sketch.js can only be called on one element at a time.');
    	    }
    	    sketch = this.data('sketch');
    	    if (typeof key === 'string' && sketch) {
    	      if (sketch[key]) {
    	        if (typeof sketch[key] === 'function') {
    	          return sketch[key].apply(sketch, args);
    	        } else if (args.length === 0) {
    	          return sketch[key];
    	        } else if (args.length === 1) {
    	          return sketch[key] = args[0];
    	        }
    	      } else {
    	        return $.error('Sketch.js did not recognize the given command.');
    	      }
    	    } else if (sketch) {
    	      return sketch;
    	    } else {
    	      this.data('sketch', new Sketch(this.get(0), key));
    	      return this;
    	    }
    	  };
    	  $('#canvas').Sketch = (function() {
    	    function Sketch(el, opts) {
    	      this.el = el;
    	      this.canvas = $(el);
    	      this.context = el.getContext('2d');
    	      this.options = $.extend({
    	        toolLinks: true,
    	        defaultTool: 'marker',
    	        defaultColor: '#000000',
    	        defaultSize: 5
    	      }, opts);
    	      this.painting = false;
    	      this.color = this.options.defaultColor;
    	      this.size = this.options.defaultSize;
    	      this.tool = this.options.defaultTool;
    	      this.actions = [];
    	      this.action = [];
    	      this.canvas.bind('click mousedown mouseup mousemove mouseleave mouseout touchstart touchmove touchend touchcancel', this.onEvent);
    	      if (this.options.toolLinks) {
    	        $('body').delegate("a[href=\"#" + (this.canvas.attr('id')) + "\"]", 'click', function(e) {
    	          var $canvas, $this, key, sketch, _i, _len, _ref;
    	          $this = $(this);
    	          $canvas = $($this.attr('href'));
    	          sketch = $canvas.data('sketch');
    	          _ref = ['color', 'size', 'tool'];
    	          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    	            key = _ref[_i];
    	            if ($this.attr("data-" + key)) {
    	              sketch.set(key, $(this).attr("data-" + key));
    	            }
    	          }
    	          if ($(this).attr('data-download')) {
    	            sketch.download($(this).attr('data-download'));
    	          }
    	          return false;
    	        });
    	      }
    	    }
    	    Sketch.prototype.download = function(format) {
    	      var mime;
    	      format || (format = "png");
    	      if (format === "jpg") {
    	        format = "jpeg";
    	      }
    	      mime = "image/" + format;
    	      return window.open(this.el.toDataURL(mime));
    	    };
    	    Sketch.prototype.set = function(key, value) {
    	      this[key] = value;
    	      return this.canvas.trigger("sketch.change" + key, value);
    	    };
    	    Sketch.prototype.startPainting = function() {
    	      this.painting = true;
    	      return this.action = {
    	        tool: this.tool,
    	        color: this.color,
    	        size: parseFloat(this.size),
    	        events: []
    	      };
    	    };
    	    Sketch.prototype.stopPainting = function() {
    	      if (this.action) {
    	        this.actions.push(this.action);
    	      }
    	      this.painting = false;
    	      this.action = null;
    	      return this.redraw();
    	    };
    	    Sketch.prototype.onEvent = function(e) {
    	      if (e.originalEvent && e.originalEvent.targetTouches) {
    	        e.pageX = e.originalEvent.targetTouches[0].pageX;
    	        e.pageY = e.originalEvent.targetTouches[0].pageY;
    	      }
    	      $.sketch.tools[$(this).data('sketch').tool].onEvent.call($(this).data('sketch'), e);
    	      e.preventDefault();
    	      return false;
    	    };
    	    Sketch.prototype.redraw = function() {
    	      var sketch;
    	      this.el.width = this.canvas.width();
    	      this.context = this.el.getContext('2d');
    	      sketch = this;
    	      $.each(this.actions, function() {
    	        if (this.tool) {
    	          return $.sketch.tools[this.tool].draw.call(sketch, this);
    	        }
    	      });
    	      if (this.painting && this.action) {
    	        return $.sketch.tools[this.action.tool].draw.call(sketch, this.action);
    	      }
    	    };
    	    return Sketch;
    	  })();
    	  $.sketch = {
    	    tools: {}
    	  };
    	  $.sketch.tools.marker = {
    	    onEvent: function(e) {
    	      switch (e.type) {
    	        case 'mousedown':
    	        case 'touchstart':
    	          this.startPainting();
    	          break;
    	        case 'mouseup':
    	        case 'mouseout':
    	        case 'mouseleave':
    	        case 'touchend':
    	        case 'touchcancel':
    	          this.stopPainting();
    	      }
    	      if (this.painting) {
    	        this.action.events.push({
    	          x: e.pageX - this.canvas.offset().left,
    	          y: e.pageY - this.canvas.offset().top,
    	          event: e.type
    	        });
    	        return this.redraw();
    	      }
    	    },
    	    draw: function(action) {
    	      var event, previous, _i, _len, _ref;
    	      this.context.lineJoin = "round";
    	      this.context.lineCap = "round";
    	      this.context.beginPath();
    	      this.context.moveTo(action.events[0].x, action.events[0].y);
    	      _ref = action.events;
    	      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    	        event = _ref[_i];
    	        this.context.lineTo(event.x, event.y);
    	        previous = event;
    	      }
    	      this.context.strokeStyle = action.color;
    	      this.context.lineWidth = action.size;
    	      return this.context.stroke();
    	    }
    	  };
    	  return $.sketch.tools.eraser = {
    	    onEvent: function(e) {
    	      return $.sketch.tools.marker.onEvent.call(this, e);
    	    },
    	    draw: function(action) {
    	      var oldcomposite;
    	      oldcomposite = this.context.globalCompositeOperation;
    	      this.context.globalCompositeOperation = "copy";
    	      action.color = "rgba(0,0,0,0)";
    	      $.sketch.tools.marker.draw.call(this, action);
    	      return this.context.globalCompositeOperation = oldcomposite;
    	    }
    	  };
    	
    	})(jQuery);
    	
    });
    Habt ihr vielleicht einen Tipp für mich?

    Beste Grüße

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.550

    AW: SAP SDK - sketch.js integrieren

    * freigeschaltet *
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: SAP SDK - sketch.js integrieren

    Zitat Zitat von sd44 Beitrag anzeigen
    NUn das Problem. Die Funktion vom Malen muss beim Startup bereits zur Verfügung stehen. Und das bekomme ich zur Zeit nicht hin.
    Was meinst du mit "Startup" genau? Was macht denn sap.designstudio.sdk.Component.subclass() genau? Wenn das nicht beim "Startup" ausführt, musst du die Definition der jQuery-Erweiterung da hald raus nehmen.
    Zitat Zitat von sd44 Beitrag anzeigen
    Ein weiterer Fehler :type off Error is not a function TypeError: $(...).sketch is not a function
    Ich kann in deinem Code nirgends einen Funktionsaufruf .sketch() finden...

  4. #4
    sd44 ist offline Grünschnabel
    registriert
    08-03-2017
    Beiträge
    2

    AW: SAP SDK - sketch.js integrieren

    Code:
    $(function() {
    	    $('#canvas').sketch;
    	  });
    ist das nicht der Funktionsaufruf?
    Geändert von mikdoe (11-03-2017 um 14:24 Uhr) Grund: Fullquote entfernt

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.550

    AW: SAP SDK - sketch.js integrieren

    aufruf sieht ok aus. aber hast du denn sketch.js überhaupt geladen?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.579

    AW: SAP SDK - sketch.js integrieren

    Zitat Zitat von sd44 Beitrag anzeigen
    ist das nicht der Funktionsaufruf?
    Nein, da fehlen die Aufrufsklammern.

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.550

    AW: SAP SDK - sketch.js integrieren

    au ja das hab ich auch nicht gesehen
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Ähnliche Themen

  1. variable in url integrieren
    Von czc im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 27-03-2006, 23:48
  2. Gästebuch in PHP-Seite integrieren
    Von ParaDee im Forum Serverseitige Programmierung
    Antworten: 8
    Letzter Beitrag: 17-09-2004, 10:51
  3. math. Funktion integrieren
    Von Bjoern im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 22-10-2003, 19:15
  4. js-menu in hp integrieren? plz help
    Von nico-tin im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 26-09-2001, 21:10
  5. window shaker im IE integrieren
    Von laber im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 27-02-2001, 18:09

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •