Neun-Patch-Bilder für Web-Entwicklung

Ich frage mich, ob es so etwas wie 9-Patch in Android, aber für Web-Entwicklung?

Disclosure: Ich habe keine Ahnung von Web-Entwicklung überhaupt, aber ich war neugierig zu wissen, ob es existiert. Und eine einfache Web-Suche mit dem Begriff 9-Patch brachte keine verwandten Ergebnisse, so dass ich dachte, es hat entweder einen anderen Begriff oder es existiert nicht oder ist nicht weit genug verwendet.

  • Wie deaktiviere ich das Scrollen von NestedScrollView & CollapsingToolbarLayout, zum Beispiel, wenn es keinen weiteren Inhalt mehr gibt?
  • Android Table Layout Ausrichtung
  • Run-as sagt 'Paket ist unbekannt' nach dem Upgrade von Android auf 4.3
  • Android AutoCompleteTextView weiß auf weiß Dropdown Liste
  • EXTRA_VIDEO_QUALITY wird ignoriert
  • Umgang mit Zertifikatsfehlern in Android Webview und Clearing der Zertifikat-Peferenzen
  • Wer weiß es?

  • Wie kann man httpPost mit json codierten Körper anrufen?
  • In-App-Browser (WebView) mit PHP / Javascript erkennen
  • Wählen Sie "Android XX" oder "Google APIs" in neuem Projekt
  • Wie man Hintergrundbilder in Android verwischt
  • Ein AVD aus Android Studio auf Ubuntu starten 17.04
  • Recyclerview schmerzhaft langsam, um zwischengespeicherte Bilder zu laden, bilden Picasso
  • 3 Solutions collect form web for “Neun-Patch-Bilder für Web-Entwicklung”

    Wenn Sie noch interessiert sind, habe ich eine Javascript-Datei erstellt, die Leinwand verwendet, um echte neun Patch-Image-Unterstützung für das Web zu erstellen. Das Open-Source-Projekt finden Sie hier:

    https://github.com/chrislondon/9-Patch-Image-for-Websites

    Nun, ich habe mir die Mühe gemacht, Wüstenfehler zu korrigieren, die ich im obigen Link gefunden habe.

    Zu wissen, dass NinePath android ein nützliches Werkzeug ist, das dynamisches Anstrich und die Anerkennung der Polsterung hinzufügt (was bei der vorherigen Plünderung fehlte). Ich könnte ein paar Skripte für die komplette Funktionalität hinzufügen.

    Ersetzen Sie den folgenden Code in der Bibliothek path9.js!

     function NinePatchGetStyle(element, style) { if (window.getComputedStyle) { var computedStyle = window.getComputedStyle(element, ""); if (computedStyle === null) return ""; return computedStyle.getPropertyValue(style); } else if (element.currentStyle) { return element.currentStyle[style]; } else { return ""; } } // Cross browser function to find valid property function NinePatchGetSupportedProp(propArray) { var root = document.documentElement; //reference root element of document for (var i = 0; i < propArray.length; i++) { // loop through possible properties if (typeof root.style[propArray[i]] === "string") { //if the property value is a string (versus undefined) return propArray[i]; // return that string } } return false; } /** * 9patch constructer. Sets up cached data and runs initial draw. * @param {Dom Element} div El Elemento dom en donde se pinta el ninepath * @param {function} callback La funcion que se llamara cuando se termina * la carga de la imagen y el pintado del elemento div. * @returns {NinePatch} Un objeto nine path */ function NinePatch(div,callback) { this.div = div; this.callback =callback; this.padding = {top:0,left:0,right:0,bottom:0}; // Load 9patch from background-image this.bgImage = new Image(); this.bgImage.src = NinePatchGetStyle(this.div, 'background-image').replace(/"/g, "").replace(/url\(|\)$/ig, ""); var este = this; this.bgImage.onload = function() { este.originalBgColor = NinePatchGetStyle(este.div, 'background-color'); este.div.style.background = 'none'; // Create a temporary canvas to get the 9Patch index data. var tempCtx, tempCanvas; tempCanvas = document.createElement('canvas'); tempCanvas.width = este.bgImage.width; tempCanvas.height = este.bgImage.height; tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(este.bgImage, 0, 0); // Obteniendo el padding lateral derecho var dataPad = tempCtx.getImageData(este.bgImage.width-1,0,1,este.bgImage.height).data; var padRight = este.getPadBorder(dataPad,este.bgImage.width,este.bgImage.height); este.padding.top = padRight.top; este.padding.bottom = padRight.bottom; dataPad = tempCtx.getImageData(0,este.bgImage.height-1,este.bgImage.width,1).data; var padBottom = este.getPadBorder(dataPad,este.bgImage.width,este.bgImage.height); este.padding.left = padBottom.top; este.padding.right = padBottom.bottom; // Loop over each horizontal pixel and get piece var data = tempCtx.getImageData(0, 0, este.bgImage.width, 1).data; // Use the upper-left corner to get staticColor, use the upper-right corner // to get the repeatColor. var tempLength = data.length - 4; var staticColor = data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3]; var repeatColor = data[tempLength] + ',' + data[tempLength + 1] + ',' + data[tempLength + 2] + ',' + data[tempLength + 3]; este.horizontalPieces = este.getPieces(data, staticColor, repeatColor); // Loop over each horizontal pixel and get piece data = tempCtx.getImageData(0, 0, 1, este.bgImage.height).data; este.verticalPieces = este.getPieces(data, staticColor, repeatColor); // use this.horizontalPieces and this.verticalPieces to generate image este.draw(); este.div.onresize = function() { este.draw(); }; if(callback !== undefined) { if (typeof(callback) === "function") callback(); } }; } // Stores the HTMLDivElement that's using the 9patch image NinePatch.prototype.div = null; // Padding NinePatch.prototype.padding = null; // Get padding NinePatch.prototype.callback = null; // Stores the original background css color to use later NinePatch.prototype.originalBG = null; // Stores the pieces used to generate the horizontal layout NinePatch.prototype.horizontalPieces = null; // Stores the pieces used to generate the vertical layout NinePatch.prototype.verticalPieces = null; // Stores the 9patch image NinePatch.prototype.bgImage = null; // Gets the horizontal|vertical pieces based on image data NinePatch.prototype.getPieces = function(data, staticColor, repeatColor) { var tempDS, tempPosition, tempWidth, tempColor, tempType; var tempArray = new Array(); tempColor = data[4] + ',' + data[5] + ',' + data[6] + ',' + data[7]; tempDS = (tempColor === staticColor ? 's' : (tempColor === repeatColor ? 'r' : 'd')); tempPosition = 1; for (var i = 4, n = data.length - 4; i < n; i += 4) { tempColor = data[i] + ',' + data[i + 1] + ',' + data[i + 2] + ',' + data[i + 3]; tempType = (tempColor === staticColor ? 's' : (tempColor === repeatColor ? 'r' : 'd')); if (tempDS !== tempType) { // box changed colors tempWidth = (i / 4) - tempPosition; tempArray.push(new Array(tempDS, tempPosition, tempWidth)); tempDS = tempType; tempPosition = i / 4; tempWidth = 1; } } // push end tempWidth = (i / 4) - tempPosition; tempArray.push(new Array(tempDS, tempPosition, tempWidth)); return tempArray; }; NinePatch.prototype.getPadBorder = function(dataPad,width,height) { var staticRight = dataPad[0] + ',' + dataPad[1] + ',' + dataPad[2] + ',' + dataPad[3]; var pad={top:0,bottom:0}; // Padding para la parte superior for (var i=0;i<dataPad.length;i+=4) { var tempColor = dataPad[i] + ',' + dataPad[i + 1] + ',' + dataPad[i + 2] + ',' + dataPad[i + 3]; if(tempColor !==staticRight) break; pad.top++; } // padding inferior for (var i=dataPad.length-4;i>=0;i-=4) { var tempColor = dataPad[i] + ',' + dataPad[i + 1] + ',' + dataPad[i + 2] + ',' + dataPad[i + 3]; if(tempColor !==staticRight) break; pad.bottom++; } return pad; }; // Function to draw the background for the given element size. NinePatch.prototype.draw = function() { var dCtx, dCanvas, dWidth, dHeight; if(this.horizontalPieces === null) return; dWidth = this.div.offsetWidth; dHeight = this.div.offsetHeight; dCanvas = document.createElement('canvas'); dCtx = dCanvas.getContext('2d'); dCanvas.width = dWidth; dCanvas.height = dHeight; var fillWidth, fillHeight; // Determine the width for the static and dynamic pieces var tempStaticWidth = 0; var tempDynamicCount = 0; for (var i = 0, n = this.horizontalPieces.length; i < n; i++) { if (this.horizontalPieces[i][0] === 's') tempStaticWidth += this.horizontalPieces[i][2]; else tempDynamicCount++; } fillWidth = (dWidth - tempStaticWidth) / tempDynamicCount; // Determine the height for the static and dynamic pieces var tempStaticHeight = 0; tempDynamicCount = 0; for (var i = 0, n = this.verticalPieces.length; i < n; i++) { if (this.verticalPieces[i][0] === 's') tempStaticHeight += this.verticalPieces[i][2]; else tempDynamicCount++; } fillHeight = (dHeight - tempStaticHeight) / tempDynamicCount; // Loop through each of the vertical/horizontal pieces and draw on // the canvas for (var i = 0, m = this.verticalPieces.length; i < m; i++) { for (var j = 0, n = this.horizontalPieces.length; j < n; j++) { var tempFillWidth, tempFillHeight; tempFillWidth = (this.horizontalPieces[j][0] === 'd') ? fillWidth : this.horizontalPieces[j][2]; tempFillHeight = (this.verticalPieces[i][0] === 'd') ? fillHeight : this.verticalPieces[i][2]; // Stretching : if (this.verticalPieces[i][0] !== 'r') { // Stretching is the same function for the static squares // the only difference is the widths/heights are the same. dCtx.drawImage( this.bgImage, this.horizontalPieces[j][1], this.verticalPieces[i][1], this.horizontalPieces[j][2], this.verticalPieces[i][2], 0, 0, tempFillWidth, tempFillHeight); } else { var tempCanvas = document.createElement('canvas'); tempCanvas.width = this.horizontalPieces[j][2]; tempCanvas.height = this.verticalPieces[i][2]; var tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(this.bgImage, this.horizontalPieces[j][1], this.verticalPieces[i][1], this.horizontalPieces[j][2], this.verticalPieces[i][2], 0, 0, this.horizontalPieces[j][2], this.verticalPieces[i][2]); var tempPattern = dCtx.createPattern(tempCanvas, 'repeat'); dCtx.fillStyle = tempPattern; dCtx.fillRect( 0, 0, tempFillWidth, tempFillHeight); } // Shift to next x position dCtx.translate(tempFillWidth, 0); } // shift back to 0 x and down to the next line dCtx.translate(-dWidth, (this.verticalPieces[i][0] === 's' ? this.verticalPieces[i][2] : fillHeight)); } // store the canvas as the div's background var url = dCanvas.toDataURL("image/png"); var tempIMG = new Image(); var _this = this; tempIMG.onload = function(event) { _this.div.style.background = _this.originalBgColor + " url(" + url + ") no-repeat"; }; tempIMG.src = url; }; The usage is the following: var elemDom = document.getElementById("idDiv"); var background = "border.9.png"; if (background.match(/\.9\.(png|gif)/i)) // Es nine path? { elemDom.style.backgroundRepeat = "no-repeat"; elemDom.style.backgroundPosition = "-1000px -1000px"; elemDom.style.backgroundImage = "url('"+background+"')"; var ninePatch = new NinePatch(elemDom,function() { elemDom.style.paddingLeft = ninePatch.padding.left; elemDom.style.paddingTop = ninePatch.padding.top; elemDom.style.paddingRight = ninePatch.padding.right; elemDom.style.paddingBottom = ninePatch.padding.bottom; }); } 
    Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.