"-fx-shape" "-fx-background-image" के साथ संगत है?

Question

मैं एक कस्टम आकार में एक बनावट लागू करना चाहता हूँ। मैंने सोचा कि यह काम करेगा:

.myTextureShape { 
-fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z"; 
-fx-background-image: url("resources/texture_bg.png"); 
-fx-background-repeat: repeat; 
} 

लेकिन ऐसा नहीं है! मुझे सही आकार मिलता है लेकिन बनावट के बिना। मेरे सभी अन्य क्षेत्र सही ढंग से texturized हैं इसलिए मुझे पता है कि वाक्यविन्यास सही है। मुझे लगता है कि ऐसा इसलिए है क्योंकि वे डिफ़ॉल्ट रूप से आयताकार हैं।

अगर मैं निम्नलिखित शैली के बजाय का उपयोग करें:

.myTextureShape { 
-fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z"; 
-fx-background-color: red; 
} 

तो मैं एक सही लाल रंग की पृष्ठभूमि मिलता है।

यदि दोनों विशेषताएँ असंगत हैं, तो मैं कस्टम एसवीजी-पैथेड-आकृति में बनावट कैसे लागू कर सकता हूं?

पीएस: मेरा बनावट पीएनजी फ़ाइल, एक छोटा 10 * 10 रास्टर है जिसे मैं अपने क्षेत्रों को भरने के लिए दोहराता हूं।

Answer 1

जहां तक ​​मेरा संबंध है -fx-shape और -fx-background-image एक साथ काम नहीं करते हैं। जावाएफएक्स सीएसएस बहुत सारे स्टाइल विकल्प प्रदान करता है ... हालांकि कुछ सीमाएं हैं और कुछ चीजें प्रोग्रामिंग के साथ ही संभव हैं। जावाएफएक्स सीएसएस impl_setShape() का उपयोग क्षेत्र वर्ग को परिभाषित आकार में मोटे तौर पर करने के लिए करता है (जो एपीआई में बहिष्कृत बाजार है लेकिन आप अभी भी इसे javafx 2.2 में आजमा सकते हैं - जिसे मैं इस समय उपयोग कर रहा हूं)। पृष्ठभूमि छवि जोड़ना आकार को अनदेखा करता है और पूरे फलक/क्षेत्र को भरता है, वही होता है यदि आप ImageView ऑब्जेक्ट्स को जोड़ने के लिए addChildren का उपयोग करते हैं। तो - सीएसएस स्ट्रिंग उस परिणाम में अनुवाद नहीं करेगी जो आप चाहें।

तो मैं कस्टम एसवीजीपीएथ आकार के पैटर्न को लागू करने के कम से कम 2 तरीकों के बारे में सोच सकता हूं। मैं जिस का उपयोग करूंगा वह ImagePattern के साथ किया जाता है। सबसे पहले इस

SVGPath shape = new SVGPath(); 
shape.setContent("M0 0 L0 50 L25 25 L50 50 L50 0 Z"); 

या का उपयोग कर आकार बिल्डर

SVGPath shape = SVGPathBuilder.create() 
    .content("M0 0 L0 50 L25 25 L50 50 L50 0 Z") 
    .build(); 

की तरह आकार का निर्माण और उसके बाद छवि पैटर्न के रूप में भरने के

Image img = new Image("myjavafxapp/resources/texture_bg.png"); 
shape.setFill(new ImagePattern(img,0,0,10,10,false)); 

एक वैकल्पिक एक कस्टम आकार क्लिप जोड़ने कतरन का प्रयोग करेंगे (सेट सीएसएस शैली में सेट -एफएक्स-पृष्ठभूमि-छवि के साथ एक फलक के लिए), जो कुछ हद तक इस

जैसा दिखता है

इनमें से एक चाल चलाना चाहिए - आपको बनावट पृष्ठभूमि के साथ अपना आकार मिलता है। यह आपको शैली के साथ एक क्षेत्र या फलक वर्ग से उम्मीद होती है क्या के बराबर है

.myTextureShape { 
    -fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z"; 
    -fx-scale-shape: false; 
    -fx-background-image: url("myjavafxapp/resources/texture_bg.png"); 
    -fx-background-repeat: repeat; 
} 

तो SVGPath आकार क्षेत्र/फलक के विपरीत, सभी आकार वर्गों nonresizable की तरह है, यही कारण है कि मैं यहाँ सेट -fx-scale-shape झूठी विशेषता। जिस तरह से आपके पास यह था डिफ़ॉल्ट सेटिंग के साथ - जो इसे सत्य पर सेट कर रहा है - जिससे आकार पूरे मूल ऑब्जेक्ट को भर देता है ... जिससे मुझे लगता है कि यह भी आपका वांछित परिणाम होगा। ... अब मूल वस्तु को आकार पैमाने बनाने के कई तरीके हैं।

मुझे आकार को एम्बेड करने के लिए समूह का उपयोग करके और समूह का अनुवाद करने की विधि के साथ काम करने के लिए मिल गया (छवि आकार को छविपटल में समायोजित करने की आवश्यकता है, ताकि बनावट आकार के साथ स्केल न हो)। मैं एक छोटा काम करने वाला ऐप जोड़ रहा हूं, जिसे मैं ऊपर दिए गए उदाहरण पर देखता था अगर मुझे सब ठीक से याद है।(यदि आप आकार चाहते हैं आनुपातिक पैमाने पर करने के लिए, आप addScale विधि में scalex और sclaey के बजाय एक ही पैमाने कारक का उपयोग)

package myjavafxapp; 

    import javafx.application.Application; 
    import javafx.application.Platform; 
    import javafx.beans.value.ChangeListener; 
    import javafx.beans.value.ObservableValue; 
    import javafx.scene.Group; 
    import javafx.scene.Node; 
    import javafx.scene.Scene; 
    import javafx.scene.layout.Pane; 
    import javafx.scene.layout.StackPane; 
    import javafx.scene.shape.SVGPath; 
    import javafx.scene.shape.SVGPathBuilder; 
    import javafx.scene.image.Image; 
    import javafx.scene.paint.*; 
    import javafx.scene.transform.Scale; 
    import javafx.scene.transform.Translate; 
    import javafx.stage.Stage; 
    /** 
    * @author martint 
    */ 
    public class MyJavaFXApp extends Application { 

      private final static String svg = "M0 0 L0 50 L25 25 L50 50 L50 0 Z"; 
      private SVGPath shape; 
      private Image img; 
      private Pane resizePane; 
      private Group shapeGroup; 
      private Node content; 

     @Override 
     public void start(final Stage primaryStage) { 

      //build the SVGPath shape 
      shape = SVGPathBuilder.create().content(svg).build(); 
      img = new Image("myjavafxapp/res/index.jpeg"); 
      resizePane = new Pane(); 
      shapeGroup = new Group(); 
      resizePane.getChildren().add(shapeGroup); 

      StackPane root = new StackPane(); 
      root.getChildren().add(resizePane); 

      Scene scene = new Scene(root, 200, 200); 
      primaryStage.setScene(scene); 
      primaryStage.show(); 
      //fill node content 
      content = nodeCont(); 
      shapeGroup.getChildren().add(content); 
      //resizing listening 
      resizePane.widthProperty().addListener(new ChangeListener<Number>(){ 
          @Override 
          public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { 
            addScaling(); 
          }}); 
      resizePane.heightProperty().addListener(new ChangeListener<Number>(){ 
          @Override 
          public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) { 
            addScaling(); 
          }}); 
      Platform.runLater(new Runnable() {   
          @Override 
          public void run() { 
            addScaling(); 
          } 
        }); 
      } 
      private Node nodeCont() { 
        Group cont = new Group(); 
        cont.getChildren().add(shape); 
        return cont; 
      } 
      private void addScaling() { 
        shapeGroup.getTransforms().clear();   
        //shape boundary 
        double cx = content.getBoundsInParent().getWidth(); 
        double cy = content.getBoundsInParent().getHeight(); 
        //resizePane boundary 
        double px = resizePane.getWidth(); 
        double py = resizePane.getHeight(); 
        //if pane set 
        if (px > 0.0 && py > 0.0) { 
          //scale 
          double scalex = px/cx; 
          double scaley = py/cy; 
          //center 
          double centerx = 0.5 * (px - cx*scalex); 
          double centery = 0.5 * (py - cy*scaley);    
          //transform 
          shapeGroup.getTransforms().add(new Translate(centerx, centery)); 
          shapeGroup.getTransforms().add(new Scale(scalex, scaley)); 
          shape.setFill(new ImagePattern(img,0,0,10/scalex,10/scaley,false)); 
        } 
      } 
      public static void main(String[] args) { 
        launch(args); 
      } 

    } 

Answer 2

inablity सीएसएस के माध्यम से एक कस्टम आकार के लिए एक पृष्ठभूमि बनावट लागू करने के लिए एक platform bug था जावाएफएक्स 2.2 (जावा 7) के साथ।

जावा 8 में, प्लेटफॉर्म बग तय किया गया है।

नमूना सीएसएस:

/** 
* file textured-shape.css 
* place in same directory as TexturedShape.java and ensure build system copies 
* this file to the build output directory. 
*/ 
.textured-shape { 
    /** (a square with the bottom triangle chunk taken out of it) */ 
    -fx-shape: "M0 0 L0 50 L25 25 L50 50 L50 0 Z"; 
    -fx-background-image: url('http://icons.iconarchive.com/icons/tooschee/misc/128/Present-icon.png'); 
    /** 
    * Image license: 
    * CC Attribution-Noncommercial 3.0 http://creativecommons.org/licenses/by-nc/3.0/ 
    * Buy commercial license here: http://tooschee.com/portfolio?worksCategory=icons 
    */ 
} 

नमूना अनुप्रयोग:

import static javafx.application.Application.launch; 
import javafx.application.*; 
import javafx.scene.Scene; 
import javafx.scene.layout.Pane; 
import javafx.stage.Stage; 

public class TexturedShape extends Application { 
    @Override public void start(Stage stage) { 
    Pane pane = new Pane(); 
    pane.setPrefSize(128, 128); 
    pane.getStyleClass().add("textured-shape"); 

    Scene scene = new Scene(pane); 
    scene.getStylesheets().add(
     getClass().getResource("textured-shape.css").toExternalForm() 
    ); 
    stage.setScene(scene); 
    stage.show(); 
    } 

    public static void main(String[] args) { launch(args); } 
} 

जावा 7 पर नमूना कोड चल रहा है, आकार पृष्ठभूमि बनावट के लिए लागू नहीं है:

Java 8b80 पर एक ही नमूना कोड चलाना, शा